教你如何讓背景圖片居中

發(fā)布日期：[2012/8/21] 編輯：奇億廣州網(wǎng)站建設(shè)

教你如何讓背景圖片居中

background-position: center center中center center這項(xiàng)值可修改。既是背景圖片的位置。比如center center表示背景圖片固定在中間，你還可以修改這一行以達(dá)到你想要顯示的效果，如改成left top表示左上，left bottom為左下，right top為右上，right bottom為右下，top為正上方，bottom為正下方。

當(dāng)然，如果僅有這些或許還不能滿足我們網(wǎng)頁的統(tǒng)籌布局。我們可以細(xì)化到具體位置，那就用坐標(biāo)代替。如改成：background-position: 20px 40px;px表示左起水平20象素，垂直40象素。試著改動(dòng)數(shù)字，可以發(fā)現(xiàn)背景圖片也會(huì)出現(xiàn)在不同位置。細(xì)化位置有很多方法，比如用百分比代替等等這里就不一一列舉了。

background-repeat: no-repeat;
no-repeat這項(xiàng)值可以改為repeat、repeat-x、repeat-y
repeat一般為默認(rèn)值，表示背景圖像在縱向和橫向上平鋪。no-repeat表示背景圖像不平鋪。repeat-x為背景圖像僅在橫向上平鋪，repeat-y:表示背景圖像僅在縱向上平鋪。
background-attachment:fixed 表示背景圖片靜止，文字在背景上面移動(dòng)，如fixed值改為scroll則表示背景圖片隨著頁面上的文字一起移動(dòng)。

另外補(bǔ)充：<fieldset style=width:1002px align=center>

將這個(gè)代碼放在搜索引薦優(yōu)化,其它頭部信息中，寬度自已調(diào)整成頁面背景中間的寬度，這個(gè)是將頁面底部的運(yùn)行信息加到和背景中間一樣寬的代碼