2． 定义多个尺寸的背景图像

background－size 属性也接受多个背景值（使用逗号分隔列表），当处理多个背景时。

下面的示例指定三个背景图像，每个图像具有不同的background－size值：

＜！DOCTYPE html＞＜html lang＝＂en＂＞
   ＜head＞        ＜meta charset＝＂UTF－8＂＞        ＜title＞项目＜／title＞        ＜style＞            ＃example1 ｛                background： url（img／fy＿indexBg．jpg） left top no－repeat， url（img／fy＿indexBg．jpg） right bottom no－repeat， url（img／17I＿hd．mp4．gif） left top repeat；                padding： 15px；                background－size： 50px， 130px， auto；                color： white；            ｝＜／style＞    ＜／head＞
   ＜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＞

3． 全尺寸的背景图片

如果希望在一个覆盖整个浏览器窗口的网站上有一个背景图像。．

要求如下：

填满整个页面的图像（没有空白）

缩放图像

图像居中页面

没有滚动条

下面的示例演示如何使用HTML元素（HTML元素始终是浏览器窗口的高度）。然后设置一个固定中心的背景上。然后用background－size属性调整它的大小：

＜！DOCTYPE html＞＜html lang＝＂en＂＞＜head＞  ＜meta charset＝＂UTF－8＂＞  ＜title＞项目＜／title＞  ＜style＞    html ｛      background： url（img／fy＿indexBg．jpg） no－repeat center fixed；      background－size： cover；    ｝＜／style＞＜／head＞＜body＞
 ＜h1＞整个页面背景图＜／h1＞  ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat． Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper    suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞
＜／body＞＜／html＞