CSS background-position Property

The background-position property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

Formal syntax: <position> [ , <position> ]* 

background-position: right top;
background-position: 10% 20%;
background-position: 20px 50px;

• topComputes to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.
• rightComputes to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.
• bottomComputes to '100%' for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.
• leftComputes to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.
• centerComputes to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is.
• <length>A length value gives a fixed length as the offset. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area.
• <percentage>A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by 'background-size'.

.class {
   background-image: url(/img/graphic.jpg);
   background-repeat: no-repeat;
   background-position: 30% 80%;
}

Click the button below to experiment with this property.

Give it a Try!

1+

6+

1+

1+

8+

• Share on Facebook
• Share on Twitter
• Share on Google+