CSS3 specification for this part of the background, the new added some useful features, such as can set up multiple background images, you can specify the size of the background, set the background gradient and other functions. CSS3 background properties defined in the specification of the new background-clip, background-origin, background-size, three attributes as described in Table 1:
Table 1 CSS3 new background properties
More than one background
CSS3 allows a plurality of background image, the background of each separated by a comma, each one representing a background image, the upper and lower layer is displayed in the order written in the CSS to be, first writing background uppermost.
And more background in the following format:
background: url(a.jpg) 0 0，url(b.jpg) 0 100%;
Here, we use three pictures to make three div background, the first method is a shorthand way of background, the code is as follows:
Div is provided above the three-code background, each set of tiled background image will not be repeated, the first layer of background references "bg1.jpg" images, located div position "00"; a second layer BACKGROUND He cited "bg2.jpg" image located "200px 0" position; the third layer bACKGROUND cited "bg3.jpg" image located "400px 0" position. The results of the runs in the browser shown in Figure 1:
1 three superimposed background
In addition to this shorthand method, we can split open background attribute, using background-image, background-repeat and background-position are provided to address the background image, and tiled position, CSS code is as follows:
This code is a rewrite of the code above, the same as in the implementation of the results of the browser. It is worth noting that the background gradient is also a background layer. Here we set div three background, the first background gradient background layer, the background is a background of the second layer. CSS code is as follows:
The first layer is a left to right "rgba (255,255,0,1)" to "rgba (255,0,0,0)" gradient background, the second layer is a "itxdl.jpg" background image. The results of the run in the browser shown in Figure 2:
BACKGROUND FIG. 2 graded layer
2 Background size
CSS3还新增了背景尺寸background-size属性，该属性可以设置具体的值，百分比等。该属性的取值及描述如表2：
表2 背景尺寸属性取值及描述
当我们为background-size设置一个值时，那么第二个值会被设置为“auto”。若对背景图片设置两个值时未与背景图本身大小成比例，容易是图片失真或变形。
下面有一个高度和宽度为200px的div，而我们想要将一张宽高为600px的图片作为背景图。我们想要将该图片填充到这个div的话，若没有background-size的属性，我们就需要使用一些软件将这张图片压缩再为设置背景，否则背景图片会溢出。未使用background-size时，CSS代码如下：
在浏览器里运行的结果如图3：
图3 背景图片未使用background-size
在这里我们只能看到“itxdl2.jpg”的左上角的三分之一。在为该背景图片的background-size设置为“200px 200px”、“200px auto”、“auto 200px”、“cover”和“contain”都可以达到全填充的目的。例如，我们在这里使用“200px auto”，增加“background-size: 200px auto”，CSS代码如下：
在浏览器里运行的结果如图4：
图4 背景图片全填充
只有当background-size值为auto时，背景图片才不会变形失真，而其他值都会造成背景图片变形夫真，所以大家使用时需要仔细考虑好，以免给你的制作带来不良效果。
3 background-origin
CSS3可以使用background-orgin属性设置图像的基准位置。该属性的取值及描述如表3：
表3 background-origin属性取值及描述
The default value of the attribute "padding-box", the name suggests, the filling frame image is started drawing. It specifies the background from which area (border, padding or content) began to draw, but was only able to control the background to start drawing position, you can use this property to draw the background on the border, but the background on the border remarkable not show up it would have to by the background-clip to decide. background-clip will be mentioned in the following sections.
Here, we will set div border translucent, reflecting the border, but also reflects the background of the border. The background-origin which is provided for background border-box, which borders to translucent. In this case the image begins to fill the frame boundary, as follows:
The div background image to start drawing from the border, the result of running in the browser shown in Figure 5:
5 background image reference position
4 background-clip
CSS3 background-orgin attribute may be used to draw a predetermined area of the background. background-clip control not only the background image, but to control the entire display range of the background element. And the attribute values described in Table 4:
Table 4 background-origin property values and description
The default value of the attribute as "border-box". Specify which areas can be displayed in the background, but it has nothing to do with the background to start drawing location, location drawing background may not appear in the background of the display area, then the equivalent of the background image is not displayed in the regional context as part of a crop.
Here, I set div "padding: 10px". The background-clip is provided which is a background of the content-box. Then start filling the background image from the border sector, CSS code is as follows:
The results of the runs in the browser shown in Figure 6:
6 background image specified drawing area