CSS3中包含幾個新的背景屬性，提供更大背景元素控制。
一、瀏覽器支持
表中的數字指定完全支持該屬性的第一個瀏覽器版本。
數字后面的 －webkit－ 或者 －moz－ 使用時需要指定前綴。
屬性ChromeFirefoxSafariOperaIEbackground－image （多背景）4．09．03．63．111．5background－size4．0 1．0 －webkit－9．04．0 3．6 －moz－4．1 3．0 －webkit－10．5 10．0background－origin1．09．04．03．010．5background－clip4．09．04．03．010．5二、CSS3 多背景
CSS3允許你為一個元素添加多個背景圖像， 通過使用 background－image 屬性．不同的背景圖像用逗號隔開，圖像疊加在一起，
例：有兩個背景圖像，第一圖像是背景圖（在右下角）和第二圖像是一個GIF動圖（在左上角）。
代碼如下：
＜！DOCTYPE HTML＞＜meta charset＝＂utf－8＂＞＜title＞項目＜／title＞＜head＞＜style＞ ＃example1 ｛
background－image： url（img／fy＿indexBg．jpg）， url（img／17I＿hd．mp4．gif）；
background－position： right bottom， left top； background－repeat：
no－repeat， repeat；｝＜／style＞＜／head＞＜html＞
＜body＞ ＜div id＝＂example1＂＞
＜h1＞Lorem Ipsum Dolor＜／h1＞ ＜p＞Lorem ipsum dolor sit amet，
consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad
minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞＜／body＞
＜／html＞
可以使用單獨的背景屬性（如上所示）或背景簡寫屬性指定多個背景圖像。
下面的例子使用了背景速記
（上面的例子，有相同的結果）
＃example1 ｛ background： url（img＿flwr．gif） right bottom no－repeat， url（paper．gif） left top repeat；｝1． CSS3 背景尺寸
CSS3 background－size 屬性允許你指定背景圖像的尺寸．
在CSS3之前的背景圖像大小是圖像的實際大小。CSS3允許我們使用背景圖像在不同的上下文中。
size可以指定長度、百分比，或通過使用一個關鍵詞： contain 或者 cover．
示例：圖片背景圖像比原圖像小得多（以像素為單位）：
代碼如下：
＜！DOCTYPE
html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞項目＜／title＞
＜style＞ ＃example1 ｛ border： 1px solid black；
background：url（img＿flwr．gif）； background－repeat： no－repeat；
padding：15px； ｝
＃example2 ｛ border： 1px solid black；
background：url（img＿flwr．gif）； background－size： 100px 80px；
background－repeat： no－repeat； padding：15px；
｝＜／style＞＜／head＞＜body＞
＜p＞原背景：＜／p＞ ＜div id＝＂example1＂＞
＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum dolor sit amet，
consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad
minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜p＞縮放背景圖：＜／p＞
＜div id＝＂example2＂＞ ＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum
dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞
＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜／body＞＜／html＞
background－size 屬性兩個可能值是：contain 和 cover．
含有關鍵詞尺度的背景圖像盡可能大的（但它的寬度和高度必須在內容區域）。因此，根據背景圖像的比例和背景區的定位，有可能不被背景圖像覆蓋。
cover 關鍵詞縮放背景圖像，內容區域完全覆蓋了背景圖像（它的寬度和高度等于或超過該范圍的內容）。因此，背景圖像的某些部分可能不在背景區的定位是可見的。
下面的示例演示了使用contain和cover：
＃div1 ｛ background： url（img＿flower．jpg）； background－size： contain； background－repeat： no－repeat；｝＃div2 ｛ background： url（img＿flower．jpg）； background－size： cover； background－repeat： no－repeat；｝
