Interpreting the CSS background (background) style

Background-color:

You can set the background color for all elements, which accepts any valid color value, and if you want the background color to extend from the element text outward, just add some padding (padding).

Note: Background-color cannot inherit, and its default value is transparent. Transparent has the meaning of "transparency". That is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements can be visible. In fact, all background properties cannot be inherited.

Background-image:

The default value of the Background-image property is None, indicating that no image is placed on the background. If you need to set a background image, you must set a URL value for this property.

Background-repeat:

If you need to tile a background image on a page, you can use the Background-repeat property. Repeat-x and repeat-y respectively cause the image to repeat only horizontally or vertically, and no-repeat does not allow the image to be tiled in any direction.

Background-position:

The use of background-position can change the position of the image in the background, background-position properties There are many ways, the following detailed interpretation:

Key words:

The image placement keyword is easiest to understand, and its role is as indicated by its name. For example, top right causes the image to be placed in the upper-left corner of the element's inner margin area. Positional keywords can appear in any order, as long as there are no more than two keywords-one corresponding to the horizontal direction and the other to the vertical direction. If only one keyword appears, another keyword is considered center.

Percent Value:

The default value is 0% 0%, which is functionally equivalent to top left, which explains why the background image is always tiled from the upper-right corner of the inner margin area of the element, unless you set a different position value. If the image position is 100% 100%, the lower-right corner of the image is placed in the lower-right corner of the right margin. If only a percentage value is provided, the value provided will be used as the horizontal value, and the vertical value will be assumed to be 50%. This is similar to keywords. If you provide a property value of 50% 50%, this causes the image to be placed properly and its center aligned with its elements. In other words, the percent value applies to both elements and images. That is, the point (center point) that is described in the image as 50% 50% is aligned with the Point (center point) in the element that is described as 50% 50%.

Length value:

The length value interprets the offset of the upper-left corner of the element's inner margin, which is the upper-left corner of the image. In other words, the upper-left corner of the image is aligned with the specified point in the Background-position declaration, which can be understood in conjunction with the function quadrant coordinates.

Note: You need to set the Background-attachment property to "fixed" to ensure that the Position property works correctly in Firefox and Opera.

background-attachment :

The default value of the Background-attachment property is scroll, which means that, by default, the background scrolls with the document. If the document is long, the background image scrolls as the document scrolls down. The image disappears when the document scrolls beyond the location of the image. You can prevent this scrolling by using the Background-attachment property. With this property, you can declare that the image is fixed in relation to the visible area (fixed) and therefore not affected by scrolling.

For background properties, you can also use the shorthand property to set all background properties in a declaration. Give me a chestnut:

body{background: #ff0000 URL (/i/eg_bg_03.gif) no-repeat fixed Center;}

Interpreting the CSS background (background) style