HTML DOM backgroundPosition Property
 Complete Style Object Reference
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
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 Demos
Change the position of the background-image
Complete Style Object Reference
|
