CSS background properties define the background for HTML elements.
CSS properties define the background effects:
background-color
background-image
background-repeat
background-attachment
background-position
background color
background-color property defines the background color of the element.
Background color of the page in the selector body of:
Examples
body {background-color:#b0c4de;}
CSS, the color values are usually defined in the following manner:
Hex - such as: "# ff0000"
RGB - 如："rgb(255,0,0)"
Color names - such as: "red"
The following examples, h1, p, and div elements have different background color:
Examples
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background image
background-image attribute describes the background image elements.
By default, a background image is repeatedly displayed tiled to cover the entire solid element.
Page background image setting examples:
Examples
body {background-image:url('paper.gif');}
The following is an example of a bad combination of text and background images. Text readability difference:
Examples
body {background-image:url('bgdesert.jpg');}
Background image - horizontal or vertical tile
background-image property will be plated in horizontal or vertical direction of the page by default.
If the number of image tiles in the horizontal direction and the vertical direction, this looks very coordinated, as follows:
Examples
body
{
background-image:url('gradient2.png');
}
If the image is only tile (repeat-x) in the horizontal direction, the page background would be better:
Examples
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Background Image - Set position and no tile
Let the background image does not affect the text layout
If you do not want the image tile, you can use the background-repeat property:
Examples
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
The example above, the background image and text appear in the same location, in order to make the page layout more reasonable, does not affect the reading of the text, we can change the position of the image.
Background-position attribute may be utilized to change the position of the image in the background:
Examples
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Background - shorthand property
In the above example we can see the background color of the page through a lot of attributes to control.
To simplify the code for these attributes, we can use these attributes are combined in the same property.
Shorthand property background color for the "background":
Examples
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When using the shorthand property, the order of the attribute value of ::
background-color
background-image
background-repeat
background-attachment
background-position
All the above properties do not need to use, you can use according to the actual needs of the page.
This example uses CSS previously described, you can view the examples: CSS examples
CSS background properties
Property Description
background shorthand property, the role of the background property is set in a statement.
If background-attachment background image is fixed or scrolling with the rest of the page.
background-color set the background color element.
the background-image as the background image.
background-position by setting the start of the background image.
background-repeat settings whether and how the background image is repeated. (Editor: Leilin Peng Source: network intrusion deleted)