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