CSS 背景自動適應屏幕大小可以讓網站在不同設備上顯示更加美觀和舒適。以下是一些方法可以幫助你實現這個效果。

使用 background-size 屬性

body {
background-image: url('path/to/background-image.jpg');
background-repeat: no-repeat;
background-size: cover;
}

上述代碼會將背景圖像鋪滿頁面，并且按比例縮放以確保圖片不失真。如果你希望圖片不完全鋪滿，可以嘗試其他值，例如：contain、100% 100%。

使用 vh 和 vw 單位

body {
background-image: url('path/to/background-image.jpg');
background-repeat: no-repeat;
background-size: 100vw 100vh;
}

這種方法會根據視口的大小來確定背景圖片的大小。這樣，當用戶縮放設備時，背景圖片也會相應調整大小。

使用媒體查詢

@media screen and (max-width: 767px) {
body {
background-image: url('path/to/background-image-small.jpg');
}
}
@media screen and (min-width: 768px) {
body {
background-image: url('path/to/background-image-large.jpg');
}
}

使用媒體查詢可以讓你在不同屏幕尺寸下使用不同的背景圖片。這樣可以確保你的網站在不同設備上都有最佳的顯示效果。