Skip to main content

Visit Mozilla.org

CSS:background-position

From MDC

« CSS Reference

[edit] Summary

background-position sets the initial position of any background image that has been set.

[edit] Syntax 

background-position: [ <percentage> | <length> | left | center | right  ] 
                     [ <percentage> | <length> | top  | center | bottom ] ? ;

background-position: [ top | center | bottom ];

background-position: inherit;

[edit] Values

<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length> <length>
With a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.

If only one value is specified, then it sets the horizontal position, with the vertical position at 50%. Otherwise, the first value specifies the horizontal position. Combinations are allowed of keyword, length, or percentage values, but if keywords are mixed with other values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.

[edit] Examples 

.exampleone {
	background-image: url("logo.png");
	background-position: top center;
}

.exampletwo {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.examplethree {
	background-image: url("logo.png");
	background-position: 2cm bottom;
}

.examplefour {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplefive {
	background-image: url("logo.png");
	background-position: 2cm 50%;
}

[edit] Specifications

[edit] Browser compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5

[edit] See also

background, background-attachment, background-color, background-image, background-position, background-repeat

Retrieved from "http://developer.mozilla.org/en/docs/CSS:background-position"