使用CSS固定頁面背景圖片位置的方法（background-attachment/background-size）
實(shí)例
如何使用CSS固定頁面背景圖片位置：
body
{
background-image: url(bg.png);
background-attachment: fixed;
}所有瀏覽器都支持 background-attachment 屬性。
只要把 background-attachment 設(shè)成 fixed 就能固定背景圖片了。若是要取消固定的話，只要把 background-attachment 拿掉或是設(shè)成 none 就行了。而其中的 background-repeat 設(shè)成 no-repeat 是避免當(dāng)背景圖片太小張時(shí)，讓它不要重覆的顯示。
還有另一種常見的情況是，背景圖片本身就只是小小張的，但想讓它固定在網(wǎng)頁的某一位置的話，我們除了用 background-attachment 之外，還要搭配 background-position 來一起使用。
Body一樣不變，直接看CSS的部份：
CSS
body{
/* 設(shè)定背景圖片 */
background-image:url("logo.gif");
/* 讓圖片不重覆排列 */
background-repeat:no-repeat;
/* 固定背景圖片位置 */
background-attachment:fixed;
/* 設(shè)定背景圖片在右下角 */
background-position:rightright bottombottom;
}background-position 值的設(shè)定可用數(shù)字加單位、數(shù)字加百分比或是使用關(guān)鍵字。background-position 基本上需要兩各值，第一個(gè)是距離左邊界的值，另一個(gè)則是距離上邊界的值。但是若是要在中間的話，可以設(shè)一個(gè) center 就可以了，另一個(gè)若沒有的話，會(huì)自動(dòng)認(rèn)為也是 center。
background-position 位置的相對關(guān)系可以參考下面的圖解。
最近在寫項(xiàng)目的時(shí)候遇到一個(gè)頁面效果：背景圖片固定，但是當(dāng)我們滾動(dòng)滾動(dòng)條的時(shí)候感覺背景圖片也隨著滾動(dòng)條上下滾動(dòng)，查閱了相關(guān)資料，做記錄如下：
只要固定的元素的背景background-size值設(shè)置為cover，background-attachment的值設(shè)置為fixed，這樣就實(shí)現(xiàn)了單頁面的背景固定和滾動(dòng)效果。
HTML代碼：
<div class="testBefore"><h1>BEFORE</h1></div> <div class="fixedBg"></div> <div class="testAfter"><h1>AFTER</h1></div>
CSS代碼：
<style>
body,html{ height: 100%; }
*{ margin: 0; padding: 0; }
.fixedBg{
min-height: 500px;
background-image: url("bg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.testBefore,.testAfter{
background: #333;
width: 100%;
height: 300px;
text-align: center;
}
h1{
color: #fff;
font-size: 100px;
line-height: 300px;
}
</style>CSS實(shí)現(xiàn)響應(yīng)式全屏背景圖實(shí)例
使用background-size 屬性，填充整個(gè)viewport.
當(dāng)css屬性background-size 值為cover時(shí)，瀏覽器會(huì)自動(dòng)按比例縮放背景圖的寬和高，直到大于或等于viewport的寬和高.
使用媒體查詢?yōu)橐苿?dòng)設(shè)備提供更小尺寸的背景圖
為什么要給移動(dòng)設(shè)備提供小尺寸背景圖呢？在demo中，我們看到的背景圖的實(shí)際尺寸為5498px * 3615px，使用這么大尺寸圖片的目的是滿足絕大多數(shù)寬屏顯示器，并且不會(huì)顯示模糊，而代價(jià)就是1.7MB的圖片體積。
但是在移動(dòng)設(shè)備上沒有必要使用這么大的圖片，同時(shí)大圖還會(huì)導(dǎo)致加載變慢，尤其是在移動(dòng)網(wǎng)絡(luò)下。
需要說明的是：為移動(dòng)設(shè)備提供小背景圖對該技術(shù)方案來說是可選的。
實(shí)踐
HTML
<!doctype html> <html> <body> ...Your content goes here... </body> </html>
后面我們會(huì)給body標(biāo)簽指定背景圖，這樣背景圖就可以填充整個(gè)瀏覽器viewport了。
其實(shí)，該方案對所有的塊級(jí)容器都可以生效。如果你的塊級(jí)容器的寬高是動(dòng)態(tài)的，那么背景圖將自動(dòng)伸縮，充滿整個(gè)容器。
CSS body標(biāo)簽的樣式如下：
body {
/* 加載背景圖 */
background-image: url(images/background-photo.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當(dāng)內(nèi)容高度大于圖片高度時(shí)，背景圖像的位置相對于viewport固定 */
background-attachment: fixed;
/* 讓背景圖基于容器大小伸縮 */
background-size: cover;
/* 設(shè)置背景顏色，背景圖加載過程中會(huì)顯示背景色 */
background-color: #464646;
}上面最重要的一條就是：
background-size: cover;
這樣瀏覽器就會(huì)按比例縮放背景圖直至背景圖寬高不小于容器的寬高（在上面的例子中，就是body標(biāo)簽）。
這里需要注意的一點(diǎn)就是：如果背景圖小于body標(biāo)簽的尺寸（例如在高分辨率顯示器上，或頁面內(nèi)容特別多時(shí)），瀏覽器會(huì)拉伸圖片。我們都知道，當(dāng)把一個(gè)圖片拉伸時(shí)，圖片會(huì)變模糊。
因此，在選擇背景圖時(shí)，要特別注意尺寸。為了照顧到大尺寸屏幕，demo里用的圖片尺寸為5498px * 3615px 。
同時(shí)，為了讓背景圖始終相對于viewport居中，我們聲明了：
background-position: center center;
上面的規(guī)則會(huì)把背景圖縮放的原點(diǎn)定位到viewport的中心。
接下來我們需要解決的問題是：當(dāng)內(nèi)容的高度大于viewport的高度時(shí)，會(huì)出現(xiàn)滾動(dòng)條。我們希望背景圖始終相對于viewport固定，即使用戶滾動(dòng)時(shí)也是一樣。
解決辦法就是：
background-attachment: fixed;
(可選)使用媒體查詢應(yīng)對小屏幕
為了應(yīng)對小屏幕，我用photoshop將背景圖按比例縮放到768px * 505px，然后通過smush.it 壓縮圖片體積。這樣就將圖片體積從1741KB降到114KB，節(jié)省了93%。
下面是媒體查詢的寫法：
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}上面的媒體查詢將max-width: 767px 設(shè)為斷點(diǎn)，也就是說當(dāng)瀏覽器viewport大于767px時(shí)，會(huì)使用大背景圖，反之使用小背景圖。
使用上面媒體查詢不利的一面是，如果你把瀏覽器窗口從1200px縮小到640px(反之亦然)，你會(huì)看到一個(gè)短暫的閃爍，因?yàn)樾”尘皥D或大背景圖正在加載。
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
