CSS background background
CSS, they are:
background-color: Specifies the color to fill the background.
background-image: Reference the image as the background.
background-position: Specify the position of the element's background image.
background-repeat: Determines whether to repeat the background image.
background-attachment: Determines whether the background image scrolls with the page.
These properties can all be combined into one abbreviated property: background. One important point to note is that the background occupies all of the element's content area, including padding and border, but does not include the element's margin. It works fine in Firefox, Safari, Opera and IE8, but in IE6 and IE7, the background does not count the border.
Background-color The
background-color property fills the background with a solid color. There are many ways to specify this color, and the following methods all give the same result.
background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;
The background-color can also be set to transparent, which makes elements underneath it visible.
Background-image
The background-image attribute allows specifying an image to be displayed in the background. Can be used in conjunction with background-color, so if the image does not repeat, the areas not covered by the image will be filled with the background color. The code is very simple, just remember that the path is relative to the style sheet, so in the following code, the image and style sheet are in the same directory.
background-image: url(image.jpg);
But if the image is in a subdirectory named images, it should be:
background-image: url（images/image.jpg）;
<html>
<head>
<style type="text/css">
body {background-image: url(这个地方要写的就是你的图片的url地址了);}
</style>
</head>
<body>
</body>
</html>Background-repeat
When setting the background image, the image will be displayed by default Tile horizontally and vertically to cover the entire element. This may be what you need, but sometimes you want the image to appear only once, or to be tiled in only one direction. The following are possible setting values and results:
background-repeat: repeat; /* Default value, tile horizontally and vertically*/
background-repeat: no-repeat; / * Not tiling. Pictures are shown only once. */
background-repeat: repeat-x; /* Tile horizontally (along the x-axis) */
background-repeat: repeat-y; /* Tile vertically (along the x-axis) Along the y-axis) */
background-repeat: inherit; /* Inherit the background-repeat attribute of the parent element*/
<html>
<head>
<style type="text/css">
body
{
background-image:url(图片123.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>Abbreviated attribute of background
You can combine the various attributes of the background into one line instead of writing them out separately every time. The format is as follows:
background: «color» «image» «position» «attachment» «repeat»
For example, the following statement
background-color: transparent;
background-image： url（image.jpg）;
background-position： 50% 0 ;
background-attachment： scroll;
background-repeat： repeat-y;
can be combined into a single line:
background: transparent url (image.jpg) 50% 0 scroll repeat-y;
and there is no need to specify each a value. If the value is omitted, the attribute's default value is used. For example, the line above has the same effect as the following:
background: url (image.jpg) 50% 0 repeat-y;
<html>
<head>
<style type="text/css">
body
{
background:#ff0000 url(图片888.jpg) no-repeat fixed center;
}
</syle>
</head>
<body>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
</body>
</html>
