Javascript Reference - HTML DOM Style backgroundPosition Property








The backgroundPosition property sets or gets the position of a background-image within an element.

Browser Support

backgroundPosition Yes Yes Yes Yes Yes

Syntax

Return the backgroundPosition property:

var v = object.style.backgroundPosition

Set the backgroundPosition property:

object.style.backgroundPosition=value

Property Values

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 bottomleft 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




Technical Details

Default Value: 0% 0%
Return Value: A string representing the position of a background-image
CSS Version CSS1

Example

The following code shows how to change the position of a background-image.


<!DOCTYPE html>
<html>
<head>
<style>
body {<!--   w w  w . j  ava  2s  .c  o  m-->
    background-image: url('http://java2s.com/style/demo/border.png');
    background-repeat: no-repeat;
}
</style>
</head>
<body>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.body.style.backgroundPosition="top right"; 
}
</script>
</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to change the position of the background-image in a <div> element to center bottom.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from   w ww. ja  va  2s  .c om-->
    background-image: url('http://java2s.com/style/demo/border.png');
    background-repeat: no-repeat;
    width: 400px;
    height: 400px;
    border: 1px solid #000000;
}
</style>
</head>
<body>
<button type="button" onclick="myFunction()">test</button>
<div id="myDiv"></div>
<script>
function myFunction() {
    document.getElementById("myDiv").style.backgroundPosition = "center bottom";  
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to change the position of the background-image in a <div> element to 100px horizontal and 40px vertical.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from   w w w . j av a  2s  .c  o  m-->
    background-image: url('http://java2s.com/style/demo/border.png');
    background-repeat: no-repeat;
    width: 400px;
    height: 400px;
    border: 1px solid #000000;
}
</style>
</head>
<body>
<button type="button" onclick="myFunction()">test</button>
<div id="myDiv"></div>

<script>
function myFunction() {
    document.getElementById("myDiv").style.backgroundPosition = "100px 40px";  
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the position of the background-image in a <div> element.


<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">test</button>
<div id="myDiv" style="background: url('http://java2s.com/style/demo/border.png') no-repeat center;height:500px;width:500px;border:1px solid black;">
</div><!--  w  ww .  j a v a  2s  . c om-->

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.backgroundPosition);  
}
</script>
</body>
</html>

The code above is rendered as follows: