The adjustment and enhancement of background property by CSS3

CSS3 for backgrounds to make some changes, the most obvious one is to adopt a multiple background, not only added 4 new attributes, and also the current properties are adjusted to enhance.

1. Multiple background pictures
In CSS3, you can apply more than one background image to another tag element. The code is similar to the css2.0 version, but you need to separate the "," comma from the reference picture. The first image is positioned at the top of the element background, followed by a background picture that appears below it, as follows:

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

2. New properties: Background Clip
This discussion lets us go back to the issue that the background is obscured by the border border in the beginning of the article. The addition of Background-clip gives us complete control over where the background is displayed. The property values are as follows:
(1) Background-clip:border background is displayed under border border
(2) background-clip:padding the background is displayed under padding instead of border the border begins
(3) Background-clip:content the background is displayed under the content area instead of starting under the border border or under padding.
(4) Background-clip:no-clip; Default property value, similar to Background-clip:border;

3. New properties: Background Origin

This property needs to be used in conjunction with Background-position. You can use Background-position to compute the location from the Border,padding or Content boxes area. (similar to Background-clip)
(1) Background-origin:border;
From the border border position
(2) background-origin:padding;
From the padding position.
(3) Background-origin:content;
From the Content-box content area position;

Background-clip and Background-origin The difference between the Www.CSS3.info site to do a good analysis of the explanation.

4, new properties: Background Size
The Background Size property is used to reset your background picture. There are several property values:
(1) Background-size:contain;
Reduce the background picture to fit the label element (mainly pixel ratio)
(2) Background-size:cover;
Let the background picture enlarge to the entire LABEL element size (mainly pixel ratio)
(3) background-size:100px 100px;
Indicate the size of the background picture scaling
(4) background-size:50% 100%;
Percentage is the size of the content label element to scale the size of the picture

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