CSS background-position 屬性

CSS background-position 屬性可以用來定義和規劃網頁背景圖片的位置，這是一個標準的 CSS 背景圖片位置設計屬性，而且絕大多數我們常用的主流瀏覽器都支援，一般來說，background-position 屬性會透過兩個參數來設定背景圖片的位置，分別為水平方向以及垂直方向，為了讓大家看得清楚一點，我們會用範例呈現出來它的效果。

CSS background-position 程式語法
background-position: 水平方向位置 垂直方向位置;
CSS background-position 屬性可以分別設定背景圖片在水平方向與垂直方向的位置，設定的參數整理於下表中：
方向參數
水平方向位置
  • left - 背景圖片靠左對齊
  • center - 背景圖片置中對齊
  • right - 背景圖片靠右對齊
  • % - 利用百分比調整背景圖片的水平位置
  • 利用距離單位（如 px, em ... 等）調整垂直距離
垂直方向位置
  • top - 背景圖片靠上對齊
  • center - 背景圖片置中對齊
  • bottom - 背景圖片靠下對齊
  • % - 利用百分比調整背景圖片的垂直位置
  • 利用距離單位（如 px, em ... 等）調整垂直距離
CSS background-position 應用範例一、靠左上角對齊
原始碼：在新視窗開啟程式碼文字檔
範例所呈現的效果
範例一所呈現的是將背景圖片固定在左上角，所以我們使用「background-position: top left;」這樣的寫法，意思是靠左邊與靠上面對齊，同時還使用了「background-repeat:no-repeat;」宣告背景圖片不要重覆顯示。

CSS background-position 應用範例二、距離左上角 10px 的距離
原始碼： 在新視窗開啟程式碼文字檔
範例所呈現的效果
範例二與範例的差別只在我們把 background-position 的參數由原本的 top left 改為 10px 10px，意思是背景圖片要靠左邊 10px 的距離，同時也靠上方 10px 的距離，利用這樣的方式可以很容易的調整背景圖片所在位置，另外，百分比也是常用的調整單位。

延伸閱讀
分享於 2015-03-03