Easy Tutorial
❮ Met Canvas Createpattern Prop Track Srclang ❯

Style backgroundPosition Property


Definition and Usage

The backgroundPosition property sets or returns the position of the background image of an element.

Syntax

Set the backgroundPosition property:

Return the backgroundPosition property:

Tip: The default value for the backgroundPosition property is: 0% 0%.

Value Description
top left <br>top center <br>top right <br>center left <br>center center <br>center right <br>bottom left <br>bottom center <br>bottom right If only one keyword is specified, the other value will be "center".
x% y% The x value represents the horizontal position, and the y value represents the vertical position. The top left corner is 0% 0%. The bottom right corner is 100% 100%. If only one value is specified, the other value will be 50%.
xpos ypos The x value represents the horizontal position, and the y value represents the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If only one value is specified, the other value will be 50%. You can mix % and units.
inherit The background position property is inherited from the parent element.

Browser Support

All major browsers support the backgroundPosition property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to support "inherit". IE9 supports "inherit".


Example

Change the position of the background image:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style>
div {
    background-image: url('img_tree.png');
    background-repeat: no-repeat;
    width: 400px;
    height: 400px;
    border: 1px solid #000000;
}
</style>
<script>
function displayResult() {
    document.getElementById("div1").style.backgroundPosition = "center bottom";  
}
</script>
</head>
<body>

<button type="button" onclick="displayResult()">Modify Background Image Position</button>
<br>
<div id="div1">
</div>

</body>
</html>

❮ Met Canvas Createpattern Prop Track Srclang ❯