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