在使用CSS設計網(wǎng)頁時，背景圖是一個非常常用和有效的工具。但是當網(wǎng)頁的尺寸不一樣時，背景圖的大小也必須隨之調(diào)整，否則會出現(xiàn)拉伸或者失真的情況，影響網(wǎng)頁的美觀度。要解決這個問題，我們可以使用CSS提供的background-size屬性。

background-size: cover;
background-size: contain;

上述代碼分別表示了兩種不同的背景圖適應大小方式。下面我們將具體介紹這兩種方式。

背景圖大小適應方式一：cover

當使用cover屬性時，背景圖會盡可能的覆蓋整個容器，并且保持比例不變。如果水平和垂直的空白區(qū)域存在時，背景圖將被裁剪以達到完美的覆蓋效果。下面是使用cover屬性的樣式代碼：

background-size: cover;

使用該屬性時，背景圖的位置將自動居中。如果需要控制背景圖的位置，可以使用background-position屬性。

背景圖大小適應方式二：contain

當使用contain屬性時，背景圖會盡可能的填充整個容器，保持比例不變。然而，與cover不同的是，當背景圖太小而無法完全填充容器時，背景圖將不會被拉伸或失真，而是將居中顯示。下面是使用contain屬性的樣式代碼：

background-size: contain;

同樣的，使用該屬性時，可以使用background-position屬性來控制背景圖的位置。

總之，通過合理的使用background-size屬性，我們可以讓背景圖在不同的屏幕尺寸下適應和呼之欲出，達到最佳的視覺效果。