常會犯的錯誤:背景被裁減
查看範例文件,在小於1280解析度時,是沒有問題的。但是如果你的顯示器的解析度大於1280像素,你會看到背景圖片以外的部分。
簡單的解決問題的方法:將圖片邊緣的顏色設定成和網頁背景色相同的顏色。這裡我用Web Designer Wall來例子,看下面的圖片,注意圖片的邊緣是純色的。
CSS部分
這部分很簡單,為body元素設定背景圖片(定位於center,top)
以下是css代碼:
body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; } |
注意觀察在body選擇符內有兩條額外的線條,這樣是為了防止當瀏覽器視窗比內容寬度小時,背景圖片的改變,這在firefox會出現。