CSS: background position

background-position

background-position: offset-x offset-y

Shift the image horizontally and vertically.

default is 0% 0%

/* Keyword values */
.x {
 background-position: center;
 background-position: top left;

 /* offset by pixels */
 background-position: 20px 60px;

 /* offset by percent */
 background-position: 50% 50%;

 /* offset from an adge */
 background-position: right 30px bottom 50px;
}

example. center

.xpos-cen-ZdRn2 {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 width: 200px;
 height: 200px;
 background-position: center;
}

example. top left

.xpos-topleft-D3p3f {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 width: 200px;
 height: 200px;
 background-position: top left;
}

example. shift by pixels

.xpos-fm95R {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 width: 200px;
 height: 200px;
 background-position: 50px 50px;
}