在網頁設計中，CSS和背景圖是非常重要的元素。CSS可以控制網頁元素的樣式，而背景圖可以為網頁增添美觀。本文將介紹如何使用CSS和背景圖實現自適應布局。

首先，在HTML文件中，我們需要使用div標簽來包裹網頁主體部分。然后，在CSS文件中，我們可以為該div標簽設置樣式。我們可以使用以下代碼：

div {
background-image: url('your_image_path');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

該代碼會將你的背景圖設置為div標簽的背景，并保持其不重復出現，覆蓋整個div區域，并在水平和垂直方向上居中對齊。

但是，如果瀏覽器窗口的大小發生變化，設置的背景圖可能不能完美地適應窗口大小，造成不美觀的效果。因此，我們可以使用CSS中的“background-size: cover”來自適應窗口大小。

同時，我們還可以使用CSS中的媒體查詢來適應不同的屏幕尺寸。例如，我們可以使用以下代碼：

@media screen and (max-width: 768px) {
div {
background-size: contain;
}
}

在這里，我們設置了當瀏覽器窗口寬度小于等于768px時，div背景圖采用“contain”方式來適應窗口大小。

綜上所述，結合使用CSS和背景圖可以實現自適應的網頁布局，讓網站在不同的設備上呈現出更美觀的效果。