The background-position property
The background-position property specifies
the position of an element's background image. The
position can be set using any
size units.
The first value indicates a left indent, the
second - a top indent.
You can also specify the position using keywords. In
this case, the order of the values is not important. Keywords
for vertical: top, center, bottom.
Keywords for horizontal: left, center,
right.
How to use keywords
To place an image with a keyword, you need to
specify one value for the vertical and one for
the horizontal. For example, if you specify the
top right value, then the image will
appear on top-right.
The order of the words is not important: you
can write top right, or you can write
right top. If there is a center
keyword, it can be omitted. For example,
top center is the same as just top. And
center center is the same as just
center.
Syntax
selector {
background-position: two values separated by a space;
}
Example
By default, the background image will be in the top left corner:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image in the top right corner:
<div id="elem"></div>
#elem {
background-position: top right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image in the bottom right corner:
<div id="elem"></div>
#elem {
background-position: bottom right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image right and center vertically:
<div id="elem"></div>
#elem {
background-position: right center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image in the center of the block:
<div id="elem"></div>
#elem {
background-position: center center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image at a
distance of 20px from the left
and 40px from the top:
<div id="elem"></div>
#elem {
background-position: 20px 40px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image at a
distance of 90% from the left
and 100% from the top:
<div id="elem"></div>
#elem {
background-position: 90% 100%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image at a distance
of 30px from the left and the bottom
vertically:
<div id="elem"></div>
#elem {
background-position: 30px bottom;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image at a distance
of 30px from the left and center
vertically:
<div id="elem"></div>
#elem {
background-position: 30px center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Example
Let's place the background image at a distance
of 30px from the top and center
horizontally:
<div id="elem"></div>
#elem {
background-position: center 30px;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
See also
-
the
backgroundproperty
that is a shorthand property for a background
