在網頁設計中，背景圖是一個非常重要的元素。其中，在完成手機端的設計時，我們有時會需要設置背景圖片，但是由于手機屏幕大小的不同，有時候會需要對圖片進行拉伸，從而影響視覺體驗。以下是一些關于如何不拉伸手機背景圖的技巧。

background-size: cover;

通過以上代碼，可以讓背景圖片以盡可能大的尺寸顯示，但不會拉伸。這是最常用的方法，可以讓圖片自適應手機屏幕大小，從而避免拉伸問題。

background-size: contain;
background-repeat: no-repeat;
background-position: center center;

如果圖片寬高比不合適，cover 可能會導致部分區域被裁剪從而影響美觀。這種情況下，contain 可以讓背景圖完全展示在容器中，而且不會拉伸。配合使用 background-repeat 和 background-position 可以讓圖片居中顯示。

background-size: 100% auto;

如果想讓圖片寬度自適應頁面而高度按比例自動調整，則可以使用上面的方法 background-size，該方法將自動根據容器寬度自適應比例進行縮放。

總之，以上是一些常用的不拉伸手機背景圖的技巧。我們可以根據自己的需求和喜好來選擇不同的方法和參數，從而達到最佳的視覺體驗。