在網頁設計中，背景圖片是非常重要的一部分。它可以為網站添加一個吸引人的視覺效果，同時也可以為網站的主題和氛圍增加更多的深度和維度。然而，有時候我們需要調整背景圖片的尺寸，以適應不同的屏幕大小和設備。這時候就需要使用CSS的拉伸功能。

background-size: cover;

這是CSS中最常用的拉伸功能，其作用是讓背景圖片完全覆蓋其所在元素，并保持其縱橫比例不變。如果容器比圖片寬，則圖片將按比例拉伸至容器寬度，高度將隨之調整以保持縱橫比。如果容器比圖片高，則圖片將按比例拉伸至容器高度，寬度將隨之調整。因此，無論容器的大小和比例如何，圖片都將被完整地顯示，并且不會出現變形。

background-size: contain;

這是另一種常見的背景圖片拉伸方式，它使得圖片在整個容器內居中，并始終保持其完整的寬高比例。如果容器比圖片寬，則圖片將縮小以適應容器寬度。如果容器比圖片高，則圖片將縮小以適應容器高度。因此，整個圖片都可以在容器中完整地顯示出來，而且不會像cover方式一樣遮擋部分圖片，同時也不會出現變形。

總之，拉伸背景圖片是一種很有用和靈活的工具，可以幫助我們解決各種網頁設計中的布局問題和適應性問題。無論使用哪種方式，都需要注意保持圖片的比例和適應性，以確保最終的效果是完美的。