CSS background-position Property
The CSS background-position property specifies the starting position of a background-image.
If the default value is set, a background-position will be placed at the top-left corner of an element. And if you set the background to be repeated, it will be repeated both vertically and horizontally.
| Initial Value | 0% 0% |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | Yes. The position can be changed. |
| Version | CSS1 |
| DOM Syntax | object.style.backgroundPosition = "center"; |
Syntax¶
background-position: value;Example of the background-position property: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned at the left-top corner of the element.</p>
</body>
</html>Example of the background-position property specified in percentage: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 15%;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 50% from the left side and 15% from the top side of the element.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 15%;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 50% from the left side and 15% from the top side of the element.
</p>
</body>
</html>Example of the background-position property in pixels:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: 5px 50px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 5px from the left, and 50px down from the top.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: 5px 50px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>
The background-image is positioned 5px from the left, and 50px down from the top.
</p>
</body>
</html>Example of the background-position property with the "right 100px" value:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 100px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned to the right and 100px down from the top.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 100px;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned to the right and 100px down from the top.</p>
</body>
</html>Example of the background-position property with the "center center" value:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned center.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 102px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<h2>Background-position property example</h2>
<p>The background-image is positioned center.</p>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| left right top top bottom center | Sets the position of the background-image. In the case we set only one value, the other will be "center". | |
| x% y% | The first value sets the horizontal position when the second value sets the vertical. 0% 0% is the top left corner. 100% 100% is the right bottom corner. If only set one value, the other value will be 50%. The 0% 0% is the default value. | |
| xpos, ypos | The first value sets the horizontal position when the second value sets the vertical. Units can be pixels (0px 0px). | |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji