CSS 作為前端開發中必不可少的一環，在頁面設計過程中經常會涉及到背景圖的使用。為了讓背景圖能夠適應頁面不同屏幕的大小，我們需要使用一些 CSS 技巧，本文將對此進行詳細介紹。

首先，我們需要設置背景圖的大小。可以使用以下 CSS 代碼：

background-size: contain;

這個屬性可以讓背景圖自動縮放，以適應其容器的大小。當然，這會導致圖像在一些分辨率下變得模糊或者拉伸。如果確保圖像不失真很重要，可以使用以下屬性：

background-size: cover;

此屬性可以讓背景圖完全覆蓋容器，不會有任何空間留白。但是這也會導致圖像失去一些細節或者被裁剪。

除了設置背景圖大小之外，還可以使用以下代碼，對背景圖的位置進行適應：

background-position: center center;
background-position: left top;
background-position: right bottom;

這些屬性可以讓你自由設置背景圖在容器中的位置，以適應不同屏幕的大小。如果你的背景圖是一張九宮格圖，可以使用以下代碼進行設置：

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

以上屬性可以幫你實現在不同屏幕尺寸下，保證背景圖的平鋪效果。

總之，使用 CSS 設置背景圖適應頁面不同屏幕的大小，需要我們綜合運用一些技巧。希望以上的介紹能對你有所幫助，愿你在前端開發過程中可以更加得心應手。