CSS3.com


CSS BACKGROUND-POSITION

The background-position property sets the starting position of a background image.

Inherited: No

Example
body {   background-image: url(stars.gif);   background-repeat: no-repeat;   background-position: top left }     body {   background-image: url(stars.gif);   background-repeat: no-repeat;   background-position: 0% 0% } .someclass { /* Multiple background images used here: Each image is matched with its corresponding position style, from the first specified to the last. */ background-image: url("background1.png"), url("background2.png"); background-position: 10px 10px, center; }
View a live example HERE
Possible Values
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right: If you only specify one keyword, the second value will be "center".
x-% y-%: The first value represents the horizontal position. The second value represents the vertical position. The top left corner is represented as 0% 0%. The right bottom corner is denoted as 100% 100%. If you specify only one value, the other one will be 50%.
x-pos y-pos: The first value represents the horizontal position. The second value represents the vertical position. The top left corner is 0 0. Units can be pixels (such as in 0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.


Go Back