The backgroundPosition property is used for setting or getting the initial position for the background image of an element relative to the origin.
Syntax
Following is the syntax for −
Setting the backgroundPosition property −
object.style.backgroundPosition = value
Values
Following are the values −
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right | The positioning can be understood by their name. If you write only one value then the other will always be center. |
| xpos ypos | To indicate the horizontal(x) and vertical position(y). It starts from top left corner with 0,0. Pixels are preferred as units although you can use any other CSS unit too. |
| x% y% | To specify the positioning in horizontal(x) and vertical(y) position in terms of percentage. It starts from top left with 0% 0% and with bottom right cornet 100% 100%. Since specifying one value means the other will be center i.e. it will be at 50%. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value. |
Example
Let us look at an example for the backgroundPosition Property −
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition="top right";
document.getElementById("Sample").innerHTML="The background image position is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>Change the background image position by clicking the below button.</p>
<button onclick="changeBackPosition()">CHANGE POSITION</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE POSITION button −
