CSS BACKGROUND-POSITION

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

Inherited: No

Example
1
2
3
4
5
body {
  background-image: url(stars.gif);
  background-repeat: no-repeat;
  background-position: top left
}    
1
2
3
4
5
body {
  background-image: url(stars.gif);
  background-repeat: no-repeat;
  background-position: 0% 0%
}
1
2
3
4
5
6
7
8
.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.