Adjust the background attribute in CSS3

CSS3 makes some modifications to the background. The most obvious one is to set multiple backgrounds. Not only are four new attributes added, but also the current attributes are adjusted and enhanced.

1. Multiple background images

In css3, you can apply multiple background images to another Tag Element. The code is similar to that of css2.0, but it must be separated by commas. The first image is located at the top of the element, and the background image is displayed below it in sequence, as shown below:

Background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg );

2. New property: Background Clip

This discussion will let us go back to the question about background being blocked by the border mentioned at the beginning of the article. The addition of background-clip allows us to completely control the position of the background display. The attribute values are as follows:
(1) background-clip: border; the background is displayed under the border of border.
(2) background-clip: padding; the background is displayed under the padding, rather than under the border.
(3) background-clip: content; the background is displayed in the content area, rather than starting under the border or padding.
(4) background-clip: no-clip; default attribute value, similar to background-clip: border;

3. New property: Background Origin

This attribute must be used with background-position. You can use background-position to calculate the position from the border, padding, or content boxes content area. (Similar to background-clip)
(1) background-origin: border;
Starting from the border position
(2) background-origin: padding;
From the position of padding
(3) background-origin: content;
Starts from the content-box content area;

The differences between background-clip and background-origin are described on www.CSS3.info.

4. New property: Background Size

The Background Size attribute is used to reset the Background image. There are several attribute values:
(1) background-size: contain;
Narrow down the background image to adapt to the label element (mainly the pixel ratio)
(2) background-size: cover;
Enlarge the background image to extend the entire label element size (mainly the pixel ratio)
(3) background-size: 100px 100px;
Specifies the scale Size of the background image.
(4) background-size: 50% 100%;
The percentage is used to scale the image size based on the content label element size.

You can go to the CSS 3 specifications site to check the simple case description.

5. New attribute: Background Break

In css3, tag elements can be divided into different regions (for example, to make the inline element span cross multiple rows), and the background-break attribute can control the display of backgrounds in different regions.
Property value:

(1) Background-break: continuous;
This property is the default value, ignoring the gap between areas (apply images to them as if they are treated as a region)
(2) Background-break: bounding-box;
Reconsider the interval between regions
(3) Background-break: each-box;
Redivide the background of each independent label area.

6. Adjust the background color

The background-color attribute is slightly enhanced in the css3 version. In addition to specifying the background color, you can also remove unused tag elements from the background image.

Background-color: green/blue; in this example, the background color may be green. However, if the background image at the bottom is invalid, blue will be displayed in place of green. If you do not specify a color, it treats it as transparent.

7. Duplicate background adjustments

When setting the background in css2, it is often intercepted by TAG elements and not displayed completely. css3 introduces two new attributes to fix this problem.
Space: The image is tiled with the same spacing and filled with the entire Tag Element.
Round: automatically scales the image until it is adapted and filled with the entire Tag Element.

The use of background-repeat: space on the CSS3 specifications website is a ready-made example.

8. Adjust the Background Attachment

The Background Attachment has a new property value: local, which is valid only when the label element is rolled (for example, overflow: scroll;). When the background-attachment is set to scroll, the background image does not scroll with the content. Now, with the background-attachment: local, you can scroll the background with the element content.