CSS3 Background 中包含幾個新的背景屬性，提供更大背景元素控制。
主要是2個背景屬性：
- background-size
- background-origin
您還將學習如何使用多重背景圖像。
## background-size
該屬性規定背景圖片的尺寸。
在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重復使用背景圖片。
您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那么尺寸相對于父元素的寬度和高度。
~~~
.background-size {
background: url(images/wl_white.png);
background-size: 100px 40px;
-moz-background-size: 100px 40px; /* Firefox 3.6 */
-webkit-background-size: 100px 40px;
background-repeat: no-repeat;
padding-top: 40px;
}
~~~
## background-origin
該屬性指定了背景圖像的位置區域。
content-box, padding-box,和 border-box 區域內可以放置背景圖像。
~~~
.background-origin-border {
width: 250px;
height: 250px;
border: 1px dotted green;
padding: 25px;
background-image: url('images/border.png');
background-repeat: no-repeat;
background-position: left;
background-origin: border-box;
}
.background-origin-content {
width: 250px;
height: 250px;
border: 1px dotted green;
padding: 25px;
background-image: url('images/border.png');
background-repeat: no-repeat;
background-position: left;
background-origin: content-box;
}
~~~
## 源碼
本文中所用例子源碼參見[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial) 中 `samples` 目錄下的 background_size.html、background_origin.html
