背景位置屬性用於設置背景圖像的位置，這個屬性只能應用於塊級元素和替換元素。其中替換元素包括img、input、textarea、select和object。
語法：
background-positon:像素值/關鍵字;
說明：
語法中的取值包括兩種，一種是采用像素值，另一種是關鍵字描述。
background-position取值為像素值時，要設置水平方向數值（x軸）和垂直方向數值（y軸）。例如：“background-position：12px 24px;”表示背景圖片距離該元素左上角的水平方向位置是12px，垂直方向位置是24px。注意，這兩個取值之間要用空格隔開。
在CSS入門教程中，全部都是使用像素作單位，在CSS進階階段我們會深入講解其他CSS單位。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-position屬性</title>
<style type="text/css">
#div1
{
width:400px;
height:300px;
border:1px solid gray;
background-image:url("../App_images/lesson/run_cj/one piece.jpg");
background-repeat:no-repeat;
background-position:80px 40px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
在浏覽器預覽效果如下：
注：預覽圖中紅色字體是注釋，方便讀者理解。
分析：
在這個例子中，我們為id="div1"的元素設置了寬度width和高度height，並且設置了一個邊框。
background-position屬性設置的水平方向距離和垂直方向距離是相對該元素的左上角而言的，大家細細體會一下上面的例子就很容易理解了。
當background-position取值為關鍵字時，也需要設置水平方向和垂直方向的值，只不過值不是使用px為單位的數值，而是使用關鍵字代替。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>background-position屬性</title>
<style type="text/css">
#div1
{
width:240px;
height:160px;
border:1px solid gray;
background-image:url("../App_images/lesson/run_cj/cartoongirl.gif");
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“background-position:right center;”中“right center;”表示水平方向在右邊（right），垂直方向在中間（center）。還有，由於圖片是gif格式的動態圖片，在浏覽器還能看到圖片在動喔。