background-position

该属性指定背景图片的初始位置。

每一个背景图片，background-position这个css属性设置了一个初始位置，该初始位置是相对于以background-origin定义的背景位置图层来说的。

 

语法

background-position: bottom;
background-position: top;
background-position: left;
background-position: center;
background-position: right;
background-position: 20% 80%;
background-position: center;

值

值描述
position 此关键词是一个<position>，一到四个距元素边界2D位置的数值。可以给出相对值或绝对值。另外位置可设置在盒模型之外。
auto 此关键词表示高度由浏览器计算确定。

例子

HTML 

<div id="red">
</div>

CSS 

#red {
     background-image:url("http://tse4.mm.bing.net/th?id=OIP.Mf677e381f4220ac2a878c923cf334aafo0&w=300&h=300&p=0&pid=1.7");
     background-repeat: no-repeat;
     background-position: center;
     height: 203px;
     border: solid 1px red;
}

执行结果

参考

相关链接

外部链接


跳至内容顶部