Home >Web Front-end >HTML Tutorial >css background-position属性_html/css_WEB-ITnose
css background-position属性_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:521641browse
The background-position property sets the starting position of the background image.
This attribute sets the position of the background original image (defined by background-image). If the background image is to be repeated, it will start from this point.
Tip: You need to set the background-attachment property to "fixed" to ensure that this property works properly in Firefox and Opera.
Default: 0% 0%
Inheritance: no
Version: CSS1
JavaScript syntax: object.style.backgroundPosition="center"
All browsers support background -position attribute.
Note: The attribute value "inherit" is not supported in any version of Internet Explorer (including IE8).
Possible values
top left
top center
top right
center left
center center
right
bottom left
bottom center
bottom right
If you only specify one keyword, the second value will be "center". Default value: 0% 0%.
x% y% The first value is the horizontal position and the second value is the vertical position. The upper left corner is 0% 0%. The lower right corner is 100% 100%. If you specify only one value, the other value will be 50%.
xpos ypos The first value is the horizontal position and the second value is the vertical position. The upper left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If you specify only one value, the other value will be 50%. You can mix % and position values.
Example 1:
<html><head><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>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p></body></body></html> Example 2:
<html><head><style type="text/css">body{ background-image: url('/i/eg_bg_03.gif');background-repeat: no-repeat;background-attachment:fixed;background-position: 30% 20%; }</style></head><body><p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p></body></html>
Example 3:
<html><head><style type="text/css">body{ background-image: url('/i/eg_bg_03.gif');background-repeat: no-repeat;background-attachment:fixed;background-position: 50px 100px;}</style></head><body><p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p></body></html>