星期日, 8月 09, 2009

CSS:讓背景影像水平垂直置中

當我們製作了一個小而精緻的網站時,網頁的內容範圍不大,因此我們可能會希望讓背景圖案能水平、垂直皆置中;一般來說,直覺的寫法可能是:
background:#111111 url(../images/bg.gif) no-repeat 50% 50%;
不過,當你以各種不同的瀏覽器檢查時,可能會發現…其實有些瀏覽器只有水平置中而已,垂直的位置並未置中(不是落在50%的地方),所以畫面會有問題…有一個很簡單的方法可以輕鬆解決這個問題:增加background-attachment為fixed的屬性,即「background-attachment:fixed;」,便可讓背景圖案真正的水平、垂直皆置中:
background:#111111 url(../images/bg.gif) no-repeat fixed 50% 50%;