backgroundPosition Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:backgroundPosition

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. backgroundPosition

Description

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

Property Values

Value
 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 other value will be "center".










x% y%



 The x value sets the horizontal position and the y value sets 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 sets the horizontal position and the y value sets the vertical position.
The top left corner is 0 0.
If you only specify one value, the other value will be 50%. You can mix % and units such as px.
initial
 Sets this property to its default value.
inherit
 Inherits this property from its parent element.

Technical Details

Item Value
Default Value: 0% 0%
Return Value: A String, representing the position of a background-image
CSS VersionCSS1

Get the position of a background-image:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="myFunction()">Get background position</button>
<br>
<div id="myDiv" style="background: url('http://java2s.com/resources/a.png') no-repeat center;height:500px;width:500px;border:1px solid black;">
</div>//from  w  w w.j a v  a2 s .c  o m

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

</body>
</html>

Related Tutorials