CSS background-position 基本語法
background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;
通常使用水平方向以及垂直方向的組合來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊，除此之外，還可以使用「靠左與靠上的距離」以及「靠左與靠上的百分比」來設計，範例還會詳細說明。可以使用的方向參數
| 方向 | 參數 |
| 水平方向 | left - 靠左對齊、center - 置中對齊、right - 靠右對齊 |
| 垂直方向 | top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊 |
CSS background-position 範例一、各種對齊方式
background-position:right bottom; // 靠右靠下對齊
background-position:30px 60px; //靠左 30px 靠上 60 px 的位置
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置
background-position:10%; // 效果同上一行，靠左 10% 靠上 50% 的位置
以上範例要確保正確顯示，需搭配 background-repeat:no-repeat 告訴瀏覽器背景圖片不要重覆顯示。特別要注意的是，如果使用了簡化寫法，只寫一個屬性值，另一個屬性值將會自動取中間值，為了將來管理方便，建議兩個方向的屬性值都寫上去比較好。background-position:30px 60px; //靠左 30px 靠上 60 px 的位置
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置
background-position:10%; // 效果同上一行，靠左 10% 靠上 50% 的位置
CSS background-position 範例二、垂直置中對齊
body{
background-image:url('背景圖片'); //先給你想要放在背景的圖片路徑或網址
background-repeat:no-repeat; //背景圖片不要重覆顯示（僅顯示一次）
background-attachment:fixed; //背景圖片位置固定
background-position:center; //背景圖片水平位置與垂直位置均置中對齊
}
垂直置中算是比較特別的一種寫法，只需要寫一個屬性值 center 即可，因為另外一個方向會自動取中間值。範例將背景圖片的位置設為固定（background-attachment:fixed）的主要原因是讓滑鼠上下滑動的時候，背景圖片不會跟著被移動，不過這樣的效果只適用在網頁背景或是 textarea 這類網頁元素中，在 DIV 區塊內使用並沒有太大的意義。另外，background-position 不只是單純的用來設計網頁背景圖片位置，也能用來設計 DIV 區塊內的背景圖片位置，用法是一樣的。background-image:url('背景圖片'); //先給你想要放在背景的圖片路徑或網址
background-repeat:no-repeat; //背景圖片不要重覆顯示（僅顯示一次）
background-attachment:fixed; //背景圖片位置固定
background-position:center; //背景圖片水平位置與垂直位置均置中對齊
}
相關閱讀