CSS是網頁設計中不可或缺的部分，它可以讓我們的網頁更加豐富和美觀。其中一個常見的問題就是如何讓背景圖片自適應。

首先，在CSS中設置背景圖片的屬性時，我們可以使用以下代碼：

.div {
background-image: url("example.jpg");
background-size: cover;
background-position: center;
}

其中，background-image指定背景圖片的路徑，background-size設置圖片的尺寸，cover表示圖片覆蓋整個元素并填滿其內容，background-position設置圖片的位置為中心。

但是，如果我們在不同尺寸的設備上查看網頁，可能會出現圖片溢出或者留白的情況。這時，我們可以使用以下代碼讓背景圖片自適應:

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

其中，background-size設置為contain表示將圖片縮放以適應元素的大小，同時保持其原始寬高比。而background-repeat設置為no-repeat，避免了圖片的重復出現。

在實際使用中，我們還可以結合@media查詢來適配不同尺寸的設備：

@media (max-width: 768px) {
.div {
background-image: url("example-mobile.jpg");
}
}

當設備的最大寬度小于等于768像素時，使用名為“example-mobile.jpg”的圖片作為背景。

總的來說，通過結合不同的CSS屬性和@media查詢，我們可以讓背景圖片自適應不同的設備，讓網頁在不同尺寸上都能呈現出更好的效果。