background-position 用來設定背景圖像起始位置的CSS樣式屬性，這個屬性設定背景原圖像（由 background-image 定義）的位置，背景圖像如果要重複，將從這一點開始。
所有瀏覽器都支持 background-position 屬性（需要把 background-attachment 屬性設定為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作）。
基本介紹
- 中文名：CSS 背景圖像定位
- 外文名：CSS background-position
- 所屬語言：CSS
用法,可能的值,實例,
用法
| 默認值： | 0% 0% |
|---|---|
| 繼承性： | no |
| 版本： | CSS1 |
| JavaScript 語法： | object.style.backgroundPosition="center" |
如何定位背景圖像：
body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}
背景位置屬性用於設定背景圖像的位置，這個屬性只能套用於塊級元素和替換元素。其中替換元素包括img、input、textarea、select和object。
background-positon:長度單位/關鍵字;
語法中的取值包括兩種，一種是採用長度單位，另一種是關鍵字描述。長度單位指的是px、百分比等。
屬性值為“長度單位”
background-position取值為長度單位時，要設定水平方向數值（x軸）和垂直方向數值（y軸）。例如：“background-position：12px 24px;”表示背景圖片距離該元素左上角的水平方向位置是12px，垂直方向位置是24px。注意，這兩個取值之間要用空格隔開。
設定值 | 說明 |
x（數值） | 設定網頁的橫向位置 |
y（數值） | 設定網頁的縱向位置 |
屬性值為“關鍵字”
當background-position取值為關鍵字時，也需要設定水平方向和垂直方向的值，只不過值不是使用px為單位的數值，而是使用關鍵字代替。
| 屬性值 | 說明 |
|---|---|
top left | 左上 |
top center | 靠上居中 |
top right | 右上 |
left center | 靠左居中 |
center center | 正中 |
right center | 靠右居中 |
bottom left | 左下 |
bottom center | 靠下居中 |
bottom right | 右下 |
可能的值
| 值 | 描述 |
|---|---|
top left top center top right center left center center center right bottom left bottom center bottom right | 如果您僅規定了一個關鍵字，那么第二個值將是"center"。 默認值：0% 0%。 |
x% y% | 第一個值是水平位置，第二個值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您僅規定了一個值，另一個值將是 50%。 |
xpos ypos | 第一個值是水平位置，第二個值是垂直位置。 左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。 如果您僅規定了一個值，另一個值將是50%。 您可以混合使用 % 和 position 值。 |
參考資料
實例
如何放置背景圖像
本例演示如何在頁面上放置背景圖像。
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
<style type="text/css">
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>提示：</b>才能保證該屬性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>
