background-position
property sets the position of the background's origin image.
When percentage or length values are used, the first is the horizontal, and the second the vertical.
If only one value is used, it sets the horizontal, the missing value is default to be either center or 50%. Negative values are permitted, and may place the origin image outside the element's content area.
Item | Value |
---|---|
Initial value | 0% 0% |
Inherited | No. |
Version | CSS1 |
JavaScript syntax | object.style.backgroundPosition="center" |
Applies to | Block-level and replaced elements. |
background-position: horizontal vertical
where horizontal is
percentage | length | left | center | right
and vertical is
percentage | length | top | center | bottom
The property values are listed in the following table.
Value | Description |
---|---|
left top | left top, if one value provided, the other value is "center". |
left center | left center, if one value provided, the other value is "center". |
left bottom | left bottom, if one value provided, the other value is "center". |
right top | right top, if one value provided, the other value is "center". |
right center | right center, if one value provided, the other value is "center". |
right bottom | right bottom, if one value provided, the other value is "center". |
center top | center top, if one value provided, the other value is "center". |
center center | center center, if one value provided, the other value is "center". |
center bottom | center bottom, if one value provided, the other value is "center". |
x% y% | x% is the horizontal position and y% is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If one value provided, the other value will be 50%. Default: 0% 0% |
xpos ypos | xpos is the horizontal position and ypos is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If one value provided, the other value will be 50%. You can mix % and positions |
inherit | inherit the background-position property from the parent element |
background-position |
Yes | Yes | Yes | Yes | Yes |
An example showing how to use background-position CSS property.
<!DOCTYPE html>
<html>
<head>
<style>
body<!--from w ww . j av a2 s .c o m-->
{
background-image:url('http://java2s.com/style/download.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
The following css code specifies two values: left top
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p { <!-- www . j a va2 s .c o m-->
border: 10px double black;
background-image: url(http://java2s.com/style/download.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: left top;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
The following css code only specifies one value: top.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p { <!-- w w w. j a v a2s . co m-->
border: 10px double black;
background-image: url(http://java2s.com/style/download.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: top;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
The background-position
property
tells browser where the background image should be located.
This is useful when image is not repeating.
The following code sets background position using pixel value.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from ww w . j a v a2s .c o m-->
background-image: url(http://www.java2s.com/style/download.png);
background-repeat: no-repeat;
background-position: 30px 10px;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>
The code above tells the browser to draw the background image 30 pixels from the left edge and 10 pixels from the top edge.
It set the position using lengths, but you can also use the predefined values shown in the following list.
The first value controls the vertical position and can be top, bottom, or center.
The second value controls the horizontal position and can be left, right, or center.