Style Object backgroundPosition Property
 Style Object
Definition and Usage
The backgroundPosition property sets the position of a background-image.
Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".
Syntax
|
Object.style.backgroundPosition=position
|
| Parameter |
Description |
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right |
If you only specify one keyword, the second value will
be "center". |
| x% y% |
The x value indicates the horizontal position and the
y value indicates the vertical position. The top left corner is 0% 0%. The right
bottom corner is 100% 100%. If you only specify one value, the other
value will be 50%. |
| xpos ypos |
The x value indicates the horizontal position and the
y value indicates the vertical position. The top left corner is 0 0.
Units can be pixels (0px 0px) or any other CSS units. If you only
specify one value, the other value will be 50%. You can mix % and units |
Example
Example
The following example changes the position of the background-image:
<html>
<head>
<style type="text/css">
body
{
background-color:#FFCC80;
background-image:url(bgdesert.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
<script type="text/javascript">
function changePosition()
{
document.body.style.backgroundPosition="bottom center";
}
</script>
</head>
<body>
<input type="button" onclick="changePosition()"
value="Change background-image position" />
</body>
</html>
|
Try it yourself »
|
Style Object
Start Creating a stunning, Flash website. It's easy and free!
Wix.com offers you a simple, powerful, drag & drop editing platform to create stunning Flash websites, layouts, and more.
With added e-commerce features such as search engine visibility and professional tools, Wix is the ultimate solution for creating a spectacular site.
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4500 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
