如何實現網頁背景圖片自適應全屏？

如果問是什么讓所有男人都生活在恐懼中，回答是不確定。沒有人表露，但好奇會害死貓。十個女人中會有九個同意這點。廣告商想盡辦法讓我們覺得不足夠，但會告訴我們還可以改進。沒錯，先生們….size很重要。

我說的是background-size。CSS里的background-size屬性能夠讓程序員決定如何在指定的元素里展示。MooTools程序員Christoph Pojer在他的網站上運用了background-size技術，使得在瀏覽器上他的頭像始終“全面覆蓋”在頁頭上——甚至是在手機上。下面讓我們來看看神奇的background-size屬性是如何使用的。

background-size CSS屬性

這個background-size屬性有幾個預定義的值，但也可以像其它size屬性一樣使用數字：

• contain: 包含，整個背景圖都要被包含在元素內，沒有超出的部分。
• cover: 覆蓋，背景要覆蓋元素的所有區域，不能有空白出現。
• 長度/百分比: 數字值

/* base header classes */
#header { /* header dimension! */ height: 350px; /* additional background properties */ background-repeat: no-repeat; background-position: center center; /* some box shadow for good fun */ -webkit-box-shadow: rgba(0,0,0,0.20) 0 10px 10px; -moz-box-shadow: rgba(0,0,0,0.20) 0 10px 10px; box-shadow: rgba(0,0,0,0.20) 0 10px 10px; } /* 覆蓋 cover */ #header.flex { /* size matters */ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } /* 包含 contain */ #header.flex { /* size matters */ -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; } /* flex, fun */ #header.flex { /* size matters */ -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; }
Christoph在其網站上使用了最后一個例子。想看看各種值下的效果，請看看下面的演示，它是用JavaScript做成的，可以有交互動作：

觀看演示

w3cschool案例如下：

規定背景圖像的尺寸：
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

親自試一試 

瀏覽器支持

親自試一試 - 實例IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。

拉伸背景圖像

拉伸背景圖像來完全覆蓋內容區域。

拉伸背景圖像，對背景圖像水平復制四次

對背景圖像進行拉伸，以使背景圖像恰好水平復制四次。

background-size神奇之處就在於它的自我調整能力。我以前常常擔心當瀏覽器窗口發生變化，當有resize事件發生時，頁面會出現不可預測的變化。但 background-size卻能根據客戶端瀏覽器的大小自我的調整適應。 background-size在火狐瀏覽器, Safari瀏覽器, 谷歌瀏覽器, Opera, 和 IE9+ 中都受支持。

你覺得這種技術有價值嗎？會使用在你的頁面上嗎？