background-position

Summary

background-position allows you to set the placement of a background-image on the element it is applied to. background-position generally takes two values, which set the horizontal and vertical position of the background image inside the element.

Overview table

Initial value

0% 0%

Applies to

All elements

Inherited

No

Media

visual

Computed value

A list, each item consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.

Animatable

Yes

CSS Object Model Property

backgroundPosition

Percentages

Refer to size of background positioning area minus size of background image

Syntax

• background-position: 30% 15%, 40% 80%, 10px 10px
• background-position: length length
• background-position: percentage percentage
• background-position: percentage
• background-position: bottom length right length
• background-position: left top

Values

length length

Any standard CSS units are acceptable as background-position values: px, ems, rems, mm, cm etc. Note that unit values specify the distance the top left corner of the background image is away from the top left corner of the element. For more details on these units, read Length units.

percentage percentage

Percentages are acceptable for background-position values, and specify percentages of the overall width and height of the element in question. Note that percentage values specify the distance the top left corner of the background image is away from the top left corner of the element.

left top

background-position can also be expressed as keywords: left top, top, right top, left, center, right, left bottom, bottom, right bottom. These values do not relate specifically to the position of the top left hand corner of the background image, but rather the overall position of the background image inside the element. So for example, a value of right top will make the background image site flush to the top and right sides of the element it is applied to; the top left corner won’t be positioned at the top right of the element!

percentage

If only a single value is included, that is taken as the horizontal value, and the vertical value is set as center.

30% 15%, 40% 80%, 10px 10px

If you have applied multiple background images to an element, you can give each background image a different position by specifying multiple background position values delimited by commas. The values supplied will cycle so that all images are given a background-position, for example if four background images are specified and only two position values, position 1 will be applied to images 1 and 3, and position 2 to images 2 and 4.

bottom length right length

CSS3 includes the new four value background-position syntax, which allows you to choose which sides of the element you are positioning the background image relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4). So this example says that you want to position the background image 10 pixels from the bottom of the element, and 15 pixels from the right. If you miss out one of the offset values, the other is assumed to be 0.

Examples

A simple set of five divs.

<
div
 
class
=
"one"
>One
</
div
>
<
div
 
class
=
"two"
>Two
</
div
>
<
div
 
class
=
"three"
>Three
</
div
>
<
div
 
class
=
"four"
>Four
</
div
>
<
div
 
class
=
"five"
>Five
</
div
>

This CSS applies the same background image and basic styling to each div, but then each div is given a different background position to vary where the background image is placed.

div
 
{
  
background-image
:
 
url
(images/icon.png);
  
background-repeat
:
 no-repeat
;
  
font-family
:
 sans-serif
;
  
font-size
:
 
16px
;
  
letter-spacing
:
 -
1px
;
  
width
:
 
200px
;
  
height
:
 
100px
;
  
margin-right
:
 
10px
;
  
border
:
 
1px
 solid 
#aaa
;
  
float
:
 left
;
  
line-height
:
 
100px
;
  
text-align
:
 center
;
  
border-radius
:
 
10px
;
  
text-transform
:
 uppercase
;
  
text-shadow
:
 
1px
 
1px
 
1px
 black;
  
box-shadow
:
 
2px
 
2px
 
5px
 
#ccc
;
  
padding-top
:
 
2px
;
}


.one
 
{
  
background-position
:
 top left
;  
}

.two
 
{
  
background-position
:
 
2rem
 
1rem
;  
}

.three
 
{
  
background-position
:
 
40%
 
80%
;  
}

.four
 
{
  
background-position
:
 
30px
;  
}

.five
 
{
  
background-position
:
 bottom 
30px
 right 
50px
;  
}

View live example

An outer container div with several inner divs.

<
div
 
id
=
"outer"
>
    
<
div
 
id
=
"save"
>
</
div
>
    
<
div
 
id
=
"settings"
>
</
div
>
    
<
div
 
id
=
"people"
>
</
div
>
    
<
div
 
id
=
"search"
>
</
div
>
    
<
div
 
id
=
"cancel"
>
</
div
>
    
<
div
 
id
=
"ok"
>
</
div
>
    
<
div
 
id
=
"back"
>
</
div
>
    
<
div
 
id
=
"forward"
>
</
div
>
  
</
div
>

Every inner div is given the same basic styling, and has the same background image applied to it. Each individual div is then given different top and left values to position it in a different place, and a different background-position value to display a different sprite. Each sprite is 128 x 128 px, and the inners divs are set to 128 x 128 px in size, so only a single sprite will be displayed at once by each of them. You need to get the background positions right, so that a whole sprite is displayed, not a part of two sprites.

body
 > 
div
 
{  
  
width
:
 
1024px
;
  
height
:
 
640px
;
  
margin 
:
 
5rem
 auto;
  
background
:
 
linear-gradient
(top right, 
rgba
(
0
,
0
,
0
,
0
),
rgba
(
0
,
0
,
0
,
0.4
));
  
background-color
:
 
#ccc
;
  
border-radius
:
 
64px
;
  
box-shadow
:
 
0px
 
0px
 
30px
 black;
  
position
:
 relative
;
}

div
 
div
 
{  
  
width
:
 
128px
;
  
height
:
 
128px
;
  
position
:
 absolute
;
  
background
:
 
url
(sprites.png);
}

#save
 
{  
  
top
:
 
64px
;
  
left
:
 
64px
;
  
background-position
:
 
0px
 
0px
;
}

#settings
 
{
  
top
:
 
192px
;
  
left
:
 
192px
;
  
background-position
:
 -
128px
 
0px
;
}

#people
 
{
  
top
:
 
320px
;
  
left
:
 
448px
;
  
background-position
:
 -
256px
 
0px
;
}

#search
 
{
  
top
:
 
320px
;
  
left
:
 
64px
;
  
background-position
:
 -
384px
 
0px
;
}

#cancel
 
{
  
top
:
 
448px
;
  
left
:
 
576px
;
  
background-position
:
 -
512px
 
0px
;
}

#ok
 
{
  
top
:
 
448px
;
  
left
:
 
704px
;
  
background-position
:
 -
640px
 
0px
;
}

#back
 
{
  
top
:
 
192px
;
  
left
:
 
832px
;
  
background-position
:
 -
768px
 
0px
;
}

#forward
 
{
  
top
:
 
320px
;
  
left
:
 
832px
;
  
background-position
:
 -
896px
 
0px
;
}

View live example

Usage

 * background-position has good support across browsers. Be aware however that some CSS data types are recent additions to the language and are not supported across older browsers.

• CSS sprites is a very common technique used to display multiple small images on a web page while cutting down on file size and HTTP requests. The images in question are all stored in a single image file which is applied to multiple different elements on the page; different parts of that file are then displayed by varying the background-position values. See example 2 for this in action.
• The four value syntax is not supported very widely across browsers.

Related specifications

See also

Related articles

Background

CSS Attributes

Other articles