例
如何定位背景圖像：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
試一試» 更多"Try it Yourself"下面的例子。
定義和用法
背景位置屬性設置背景圖像的起始位置。
Tip:在默認情況下，背景圖像被放置在一個元素的左上角，以及垂直和水平反复。
| 默認值： | 0% 0% |
|---|---|
| 遺傳： | no |
| 動畫： | yes. Read about animatable Try it |
| 版： | CSS1 |
| JavaScript語法： | object .style.backgroundPosition="center" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4 | 1.0 | 1.0 | 3.5 |
Note: IE8和更早的版本不一個元素上支持多個背景圖像。
CSS語法
background-position:value;屬性值
| 值 | 描述 | 播放 |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | 如果只指定一個關鍵字，另一個值將是"center" | 播放 ” |
| x% y% | 第一個值是在水平位置和所述第二值是垂直。 左上角為0％0％。 右下角為100％，100％。 如果只指定了一個值，另一個值將是50％。 。 缺省值是：0％0％ | 播放 ” |
| xpos ypos | 第一個值是在水平位置和所述第二值是垂直。 左上角是0 0單位是像素(0px 0px)或任何其他的CSS單元 。 如果只指定了一個值，另一個值將是50％。 您可以混合使用％和立場 | 播放 ” |
| initial | 將此屬性設置為默認值。 閱讀關於初始 | 播放 ” |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
更多示例
例
如何用百分比來定位背景圖像：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
試一試» 例
如何使用像素來定位背景圖像：
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
試一試» 相關頁面
CSS教程： CSS背景
CSS參考： background-image property
HTML DOM參考： backgroundPosition property