Background position

The background-position property is used in combination with the background-image property; in other words if there is an image specified as background then the background-position property defines where the image will be position within the content.

The background-position property contains following information:

value: [[<percentage>, <length>, left, center, right][<percentage>, <length>, top, center, bottom]?], [[left, right, center], [top, center, right]] or inherit;
initial: 0% 0%;
applies to: all elements;
inherited: no;
percentages: refers to the size of the box itself;
media: visual;
computed value: for <length> the absolute value, otherwise a percentage.

If only one value is specified, the second value is assumed to be center. If one of the values is not a "keyword" then the first value is taken to be horizontal position while the second is the vertical. Negative values for <percentage> and <length> are allowed.

The values given as percentage or length will move the image across the horizontal axis and down across the vertical axis. For instance a value "0% 0%" will position the image in the upper left corner, while the value of "100% 100%" will position it in the lower right corner.

The values top, right, bottom and left are equivalents to "0%" for the vertical position, "100%' for the horizontal position, "100%" for the vertical position and "0%" for the horizontal position respectively. The value center is equivalent to the "50%" for the horizontal position if it's not otherwise given and "50%" for the vertical position if it is.

Example

CSS background-position property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div {
	position:relative; overflow:visible;
	width:90%; height:120px;
	background-image:url('../../../img/tutorials/back_ex2.png');
	background-repeat:no-repeat;
	background-position:center;
}
div+div {
	background-position:10% 90%;
}
p {
	position:relative;
	top:0px;
}
</style>
</head>

<body>

<div>
	<p>This background picture is centered by using only one keyword</p>
</div>
<div>
	<p>This background picture is offset by using percentages</p>
</div>
</body>
</html>

›› go to examples ››

Background position

Example

CSS background-position property example:

Comments

About

Contact

Get Connected