Tóm Tắt
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 ofright 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.