CSS Background

CSS background property is used to define the background of HTML elements.

CSS properties define background effects:

background-color

background-image

background-repeat

background-attachment

background-position

Background color

The background-color property defines the background color of the element.

In CSS, color values are usually defined in the following way:

Hexadecimal - such as: "#ff0000"

RGB - such as: "rgb(255,0,0)"

Color name - such as: "red"

In the following example, the h1, p, and div elements have different background colors:

      
  
静夜思
 
 床前明月光， 
疑是地上霜。
 举头望明月， 
低头思故乡。
 
  

Background image

The background-image attribute describes the background image of the element.

By default, the background image is displayed tiled and repeated to cover the entire element entity.

Page background image setting example:

      
  
明天你好！！
  

Background image - horizontal or vertical tiles

By default, the background-image attribute will tile the page horizontally or vertically.

If some images are tiled horizontally and vertically, it will look very inconsistent, as shown below:

      
  
明天你好！！
  

If the image is only tiled horizontally (repeat-x), If the image is only tiled horizontally (repeat-y).

Background image - set positioning and non-tiled

Let the background image not affect the layout of the text

If you don’t want the image to be tiled, you can use the background-repeat attribute:

      
  
 
明天你好！！
 
  

In the above example, the background image and text are displayed at the same position. In order to make the page layout more reasonable and not affect the reading of the text, we can change the position of the image.

You can use the background-position property to change the position of the image in the background

background-position:right top;

Background-abbreviation property

above In the example, we can see that the background color of the page is controlled by many attributes.

In order to simplify the code of these properties, we can combine these properties in the same property.

The abbreviation property of the background color is "background":

When using the abbreviation attribute, the order of attribute values is: :

background-color

background-image

background-repeat

background-attachment

background-position

You don’t need to use all the above attributes, you can use them according to the actual needs of the page.