/

HTML / CSS / JavaScript Tutorial

CSS Property: background-position

[this page | pdf | back links]

The CSS (CSS1) background-position property sets the (starting) position of a background image. By default, a background-image is placed at the top-left corner of an element and is repeated both vertically and horizontally.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

value

See below

x% y%

Horizontal position and vertical position as fraction of size of element. Top left is 0% 0%, bottom right is 100% 100%. If you only specify one value then the other will be 50%.

xpos ypos

(e.g. 0px 0px). Horizontal position and vertical position in any valid CSS length. You can mix % and positions

 

Default Value:

0% 0%

JavaScript syntax:

e.g. object.style.backgroundPosition="10% 20%"

Inherited:

No

Animatable:

Yes

 

Other acceptable values include combinations of left, center, right (for xpos) and top, center, bottom (for ypos). If you only specify one keyword then the other value will be center.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; background-image: url(NematrianLogo.png); padding: 20px;}
p.x1 {background-position: center;}
</style>
</head>
<body>
1. Element with default property<br>
<p>1</p><br>
2. Element set using in-file HTML style
<p class="x1">2</p><br>
3. Element set using JavaScript
<p id="x2">3</p>

<script>
document.getElementById("x2").style.backgroundPosition =
  "center";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBackgroundPosition() {
  var x = document.createElement("DIV"); x.style.backgroundPosition = "center"; return (window.getComputedStyle(x, null).backgroundPosition == "center");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile