CSS背景圖的設置距離相信很多網站制作者都會遇到這樣的問題。當我們在實際應用中，經常會遇到需要給背景圖設置一定的距離，這就要涉及到CSS中的background-position屬性。下面就讓我們一起來學習一下這個屬性怎么使用吧！

樣式代碼如下：
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position:left top;
background-attachment:fixed;

上面的代碼是為了設置一個完整的背景圖樣式，其中background-position是我們今天要講解的一個屬性。這個屬性表示背景圖相對于元素的位置，可以設置為像素值、百分比值、關鍵字值等等。以下是具體的設置方式：

1、使用像素值設置距離
background-position:10px 20px;
2、使用百分比值設置距離
background-position:10% 20%;
3、使用關鍵字值設置距離
background-position:left top;
background-position:center center;
background-position:right bottom;

值得一提的是，當設置關鍵字值時，如果只寫一個值，則另一個值默認為50%。比如，當設置為“left”時，其實是相當于“left 50%”，表示背景圖左側與元素中線對齊。

最后，我們需要特別注意的是，如果設置了background-attachment:fixed屬性，則背景圖將會固定在元素的指定位置，不會隨著頁面滾動而移動。實際應用中，我們需要根據不同的需求來進行靈活的設置。