CSS背景圖片自適應網頁

在設計網頁時，有時需要使用背景圖片來增強頁面的美觀度。然而，不同設備分辨率的差異會導致背景圖片顯示不全或變形等問題。針對這些問題，我們可以使用CSS來解決。

#bg{
background-image: url("bg.jpg");
background-size: cover;
background-repeat: no-repeat;
}

以上CSS代碼中，設置了背景圖片bg.jpg，并使用background-size屬性來讓圖片大小自適應網頁的大小。cover值將會縮放并裁剪圖片來匹配網頁大小，確保始終完全覆蓋整個頁面。同時，我們還將background-repeat屬性設置為no-repeat來避免出現平鋪的情況，從而達到最佳效果。

值得注意的是，如果設備分辨率過高，使用cover屬性可能會使圖片失真，這時可以考慮使用contain屬性來避免這種情況。

#bg{
background-image: url("bg.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

以上CSS代碼中，我們將background-size屬性設置為contain，通過拉伸背景圖片保存它的高寬比例，使圖片以完整的形式出現。同時，我們還設置了background-position屬性使其居中顯示。

總之，無論是使用cover還是contain，通過CSS來自適應背景圖片可以讓網頁更加美觀、符合用戶需求。