CSS background-position 属性

CSS background-position 属性为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。

background-position 属性被指定为一个或多个 <position> 值,用逗号隔开。


实例

如何定位背景图像:

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body
  5. {
  6. background-image:url('/images/paper.gif');
  7. background-repeat:no-repeat;
  8. background-attachment:fixed;
  9. background-position:center;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <body>
  15. <p><b>提示:</b>您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
  16. </body>
  17. </body>
  18. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
background-position1.04.01.01.03.5

定义和用法

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

默认值:0% 0%
继承性:no
版本:CSS1
JavaScript 语法:object.style.backgroundPosition="center"

可能的值

描述
  • 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 值。

注意,如果背景图片的大小和容器一样,那设置百分比的值将永远无效,因为“容器和图片的差”为0(图片永远填满容器,并且图片的相对位置和容器的相对位置永远重合)。在这种情况下,需要为偏移使用绝对值(例如px)。

相关页面

CSS 教程:CSS 背景

CSS 参考手册:background-image 属性

分类导航