CSS Backgrounds (Background)
CSS background properties are used to define the background of 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 to use in the body selector:
Examples
CSS, the color values are usually defined in the following manner:
- Hex - such as: "# ff0000"
- RGB - such as: "rgb (255,0,0)"
- Color names - such as: "red"
The following example, h1, p, and div elements have different background colors:
Examples
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background image
background-image attribute describes the background image elements.
By default, the background image is tiled repeatedly displayed to cover the entire element entity.
Page background image setting examples:
Examples
Here is an example of a bad combination of text and background image. Text poor readability:
Examples
Background images - horizontal or vertical tiling
By default, the background-image property is tiled in horizontal or vertical orientation of the page.
If some images tiled horizontally and vertically, so it looks very coordinated, as follows:
Examples
{
background-image:url('gradient2.png');
}
If an image tile (repeat-x) only in the horizontal direction, the page background will be better:
Examples
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Background Image - Set position and not 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
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
The above example, the background image and the text appears 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 location of the image.
Background-position property can be used to change the image in the background here:
Examples
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Background - shorthand property
In the example above, we can see the background color of the page through a lot of attributes to control.
To simplify the code for these properties, we can use these attributes are combined in the same property.
Shorthand property background color for the "background":
Examples
When using the shorthand property, the order of attribute values as ::
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
All these attributes do not need to use, you can use according to the actual needs of the page.
This example uses CSS described previously, you can view the instance: CSS Examples
More examples
How to set a fixed background image
This example demonstrates how to set a fixed background image. Image will not scroll with the rest of the page.
CSS background properties
Property | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |