background-position
Description
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. |
Syntax and Property Values
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 |
Example
<!DOCTYPE html>
<html>
<head>
<style>
body<!--from w w w.j av a 2 s . co 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 code above generates the following result.
Position background to left and top
The following css code specifies two values: left top
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p { <!--from w ww . j a v a 2 s .com-->
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 code above generates the following result.
Set the background position to top
The following css code only specifies one value: top
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p { <!--from w w w . j ava2s.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 code above generates the following result.
