教你如何讓背景圖片居中
教你如何讓背景圖片居中
<style type="text/css"><!-- body {background-image: url(http://WWW.STUDSTU.COM/logo.gif);background-color: #ffffff; background-position: center; background-repeat: repeat-y; background-attachment: scroll; } --> </style>
background-position: center center中center center這項值可修改。既是背景圖片的位置。比如center center表示背景圖片固定在中間,你還可以修改這一行以達到你想要顯示的效果,如改成left top表示左上,left bottom為左下,right top為右上,right bottom為右下,top為正上方,bottom為正下方。
當然,如果僅有這些或許還不能滿足我們網(wǎng)頁的統(tǒng)籌布局。我們可以細化到具體位置,那就用坐標代替。如改成:background-position: 20px 40px;px表示左起水平20象素,垂直40象素。試著改動數(shù)字,可以發(fā)現(xiàn)背景圖片也會出現(xiàn)在不同位置。細化位置有很多方法,比如用百分比代替等等這里就不一一列舉了。
background-repeat: no-repeat;
no-repeat這項值可以改為repeat、repeat-x、repeat-y
repeat一般為默認值,表示背景圖像在縱向和橫向上平鋪。no-repeat表示背景圖像不平鋪 。repeat-x為背景圖像僅在橫向上平鋪,repeat-y:表示背景圖像僅在縱向上平鋪。
background-attachment:fixed 表示背景圖片靜止,文字在背景上面移動,如fixed值改為scroll則表示背景圖片隨著頁面上的文字一起移動。
另外補充:<fieldset style=width:1002px align=center>
將這個代碼放在搜索引薦優(yōu)化,其它頭部信息中,寬度自已調(diào)整成頁面背景中間的寬度,這個是將頁面底部的運行信息加到和背景中間一樣寬的代碼