CSS背景設置隨瀏覽器大小

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

在網站開發中，有時需要設置一個背景圖案或圖片。這可以通過CSS background屬性來實現。但是，如果不設置背景大小則可能會出現問題。因為如果瀏覽器的大小改變，背景圖片也會跟著改變，導致視覺上的不協調。

解決這個問題的方法是使用CSS3的background-size屬性。這個屬性允許我們將背景圖案或圖片縮放成一個特定的大小，并讓它與瀏覽器大小相協調。下面就是相應代碼：

background-size: cover;

這個代碼可以自動將背景圖片縮放，直到它完全覆蓋容器。這確保了背景圖片的大小隨著瀏覽器窗口大小而變化時，圖片不會變形或失真。

需要注意的是，如果使用CSS的background-size屬性，最好將背景圖片設置為不重復。這可以通過background-repeat:none來實現。這樣可以防止背景圖片在縮放時出現不協調的情況。

總之，CSS的background-size屬性是設置一個自適應背景圖片的不錯的方法。它可以讓你的網站更加美觀和全面，不管用戶使用的是桌面電腦還是移動設備。