CSS background-position

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.

%pxptemvw...
background-position: positions
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.

Normal Usage

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.

.example {
background-color: #4c9ee3; background-image: url('duck.png'); background-repeat: no-repeat; background-position: right 70% bottom 30%;
}

background-origin

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.

.example {
background-color: #d5d5d5; background-image: url('gear.png'); background-repeat: repeat-y; background-position: right top; background-origin: content-box; padding: 30px;
}

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.

.example {
background-color: #84D251; background-image: url('baseball.png'), url('soccer.png'); background-repeat: no-repeat; background-position: 100px 20px, right bottom; padding: 30px;
}

Shorthand Syntax

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:

.example {
background: #8ada55 40% 20% no-repeat url('monkey.png');
}

For multiple background layers (images), use the same syntax, separating each set of values with commas. See background for more.

CSS Sprites

CSS Sprites are a great common application of background-position. Sprites are collections of images all combined into a single big image.

sprite

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.

.thumbs-up {
width: 20px; height: 20px; background-image: url('sprite.png'); background-position: -16px -22px;
}

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.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>