Learn CSS background image attributes background

The background attribute "Background" of CSS provides many attribute values, such as color, image, and positioning, which greatly facilitates the definition of background images on webpages. Check the attribute values provided by background:

Background: Background-color | background-image | background-repeat | background-attachment | background-Position

From the attribute value name, we can clearly see the colors, images, layout, scrolling, and positioning, among them, background-repeat and background-position must be valid only after the background-image attribute value is specified.

Background-color: transparent | color. "Transparent" is the default attribute value of background-color (red indicates the default value). It indicates that the background color is transparent, that is, there is no background color. "color" indicates the color, it can be an HTML language that supports English words or hexadecimal color values. Of course, we recommend that you use hexadecimal color values for representation. For example, black uses "#000 ".

Background-image: None | URL. The default attribute value is no background image. You can use a URL to import the background image.

Background-repeat: Repeat | no-repeat | repeat-x | repeat-y. The default attribute value is that the background image is tiled vertically and horizontally. If you do not want the image to be tiled but to display it in a complete lined image, use "no-repeat ", the same principle is to use "Repeat-X" to tile horizontally and use "Repeat-y" to tile vertically ".

Background-Attachment: Scroll | fixed. "Scroll" indicates that the background image is tumble with the object content, and "fixed" indicates that the background image is fixed.

Background-position: Position (length) | position (length ). There are two methods to select the background image position of an object. One is to use position (top | center | bottom | left | center | right) to locate the background image position, the other method is to use lefgth (numeric value) for locating. When only one numeric value exists, this value is used for abscissa, and the default ordinate value is 50%, if there are two numeric values, they are X and Y.

After understanding and familiarizing yourself with the preceding background attributes and attribute values, you can easily process the background images of the web page. However, here is a tip: After defining the background-image attribute, you should define a background-color value that is similar to the background image color, in this way, after the background image is not loaded completely or the background image is lost, it can still provide good text recognition. For example, if the background image is like a black basemap, the color of the text will naturally be light or even white. If the background image is not loaded yet or the image is lost, therefore, you need to define a black background color to ensure the readability of the text.