The background-position CSS property is used to position the background images of an element (which include any gradients). The position is relative to the element's padding edges by default. The background-origin property allows changing the positioning reference (to content-box, for example), without altering the painted area, which is set by background-clip. When using multiple background images, separate positions with commas to specify a different position for each one.
background-position: 50% 20%; /* horizontal-pos vertical-pos */ background-position: right bottom; background-position: bottom 20px right 20em; /* 20px from bottom, 20em from right edge */ background-position: 35% 15%, 20% 80%; /* two images, different positions */
A position may be one or two offsets. The first one is relative to the left edge of the box by default, and the second one, if provided, is relative to the top. Keywords are valid as well: left, center, right and top, center, bottom. A four value syntax allows offsetting from any edge, eg:
right 35% bottom 65%.
When using multiple background images, separate positions with commas to specify a different position for each one. This will position background layers in the order set using background-image.
Browser Support: Full.
background-position is most often used to place a non-repeating background image. The property allows placing the background relative to any edge of the box. Keep in mind that positioning works by setting the distance between same edges, eg. right edge of the background and right edge of the box.
The background-origin property changes the reference for background-position. Instead of being relative to the padding box (edge of padding without including border), the background can be positioned relative to the border box or content box.
Note how the background still covers the padding area. The property that changes the painting area is background-clip.
Positioning Multiple Background Images
Separate each set of values with commas to position background images one by one. All the background image properties take such lists. The first image from the background-image list will be in front of the rest.
The background property is shorthand for several background properties:
background: color position size repeat origin clip attachment image
To position a non-repeating background using the shorthand:
For multiple background layers (images), use the same syntax, separating each set of values with commas. See background for more.
CSS Sprites are a great common application of background-position. Sprites are collections of images all combined into a single big image.
The background is moved using background-position to show different sections of the image on different elements. Combining buttons and icons in a sprite greatly reduces the amount of file requests, speeding up the site. In this case pixels are the choice. Negative values move the background up and to the left.
Changing the position will reveal other parts of the sprite.
Positioning a Fixed Background
Backgrounds with background-attachment set to fixed are placed relative to the HTML element always. backgound-position works on them but there's no way to position the background relative to the initial position of the element.