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>
