The best CSS Backgrounds (Background) Tutorial In 2024, In this tutorial you can learn background color,Examples,Examples,Background image,Examples,Examples,Background images - horizontal or vertical tiling,Examples,Examples,Background Image - Set position and not tile,Examples,Examples,Background - shorthand property,Examples,More examples,CSS background properties,
CSS background properties are used to define the background of HTML elements.
CSS properties define the background effects:
background-color property defines the background color of the element.
Background color of the page to use in the body selector:
CSS, the color values are usually defined in the following manner:
The following example, h1, p, and div elements have different background colors:
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:
Here is an example of a bad combination of text and background image. Text poor readability:
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:
If an image tile (repeat-x) only in the horizontal direction, the page background will be better:
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:
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:
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":
When using the shorthand property, the order of attribute values as ::
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
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.
Property | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |