HTML - DOM Style Object backgroundPosition Property
HTML DOM Style Object backgroundPosition property sets or returns the position of background image of an element.
Syntax
Given below are the syntax to get or set the backgroundPosition property.
Set the backgroundPosition property:object.style.backgroundPosition = value;Get the backgroundPosition property:
object.style.backgroundPosition;
Property Values
| Value | Description |
|---|---|
|
top left top center top right center left center center center right bottom left bottom center bottom right |
It specifies the position of background image using keywords. If only one value is specified, by default other value is 'center'. |
| x% y% | It specifies the position of background image using percentage where x represents horizontal positioning while y represents vertical positioning. 0% 0% represents top left corner while 100% 100% represents bottom right corner. When only one value is specified, by default other value is 50%(center). |
| xpos ypos | It specifies the position of background image using pixels or any other CSS measurement units where x represents horizontal positioning while y represents vertical positioning. 0 0 represents top left corner while 100 100 represents bottom right corner. When only one value is specified, by default other value will be center. |
| initial | It is used to set this property to it's default value. |
| inherit | It is used to inherit the property of it's parent element. |
Return Value
It returns a string value which represents position of background image.
Examples of HTML DOM Style Object 'backgroundPosition' Property
The following examples illustrates Positioning of background using different ways.
Position using Keywords
In the following example, we have used keywords to position the background image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
HTML DOM Style Object backgroundPosition Property
</title>
<style>
body {
background: #f3f3f3 url('/html/images/logo.png') no-repeat;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<p>Click to change positioning.</p>
<button onclick="topcen()">Top Center</button>
<button onclick="bottomleft()">Bottom Left</button>
<button onclick="centerright()">Center Right</button>
<script>
function topcen(){
document.body.style.backgroundPosition="top";
}
function bottomleft(){
document.body.style.backgroundPosition="bottom left";
}
function centerright(){
document.body.style.backgroundPosition="center right";
}
</script>
</body>
</html>
Position using Percentage
In the following example, we have used percentage to position the background image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Style Object backgroundPosition Property</title>
<style>
body {
background: #f3f3f3 url('/html/images/logo.png') no-repeat;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<p>Click to change positioning.</p>
<button onclick="fun()">Change</button>
<script>
function fun(){
document.body.style.backgroundPosition="74% 80%";
}
</script>
</body>
</html>
Position using Pixels
In the following example, we have used pixels to position the background image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Style Object backgroundPosition Property</title>
<style>
body {
background: #f3f3f3 url('/html/images/logo.png') no-repeat;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<p>Click to change positioning.</p>
<button onclick="fun()">Change</button>
<script>
function fun(){
document.body.style.backgroundPosition="60px 60px";
}
</script>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| backgroundPosition | Yes 1 | Yes 12 | Yes 1 | Yes 1 | Yes 3.5 |
html_dom.htm
Advertisements