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.