LAST UPDATED: MAY 31, 2021
CSS background-position Property
CSS background-position property is used to set position for every background image, where the position is relative to the position set by the background-origin property. The background-position property may be specified as one or more position values that are separated by commas.
Syntax for background-position Property
Following is the syntax for the background-position property.
background-position: value;
Example: CSS background-position Property
Here in the example below, we are using the background-position property with different background positions, borders, and their different values. In this case, we have given the background-position using the edge offsets values. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<head>
<title>Background-position property</title>
<style type="text/css">
div {
background-color: pink;
background-repeat: no-repeat;
width: 300px;
height: 80px;
margin-bottom: 12px;
}
.exampleone {
background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 left 4em bottom 1em no-repeat;
}
.examplethree {
background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png");
background-position: 0px 0px,
right 3em bottom 2em;
}
</style>
</head>
<body>
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
</body>
</html>
Output:
Example 2: CSS background-position Property
Here in the example below, we are using the background-position property with different background positions, borders, and their different values. In this case, we have given the background-position as the edge offsets values. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<head>
<title>Background-position property</title>
<style type="text/css">
div {
background-color: pink;
background-repeat: no-repeat;
width: 300px;
height: 80px;
margin-bottom: 12px;
}
.exampleone {
background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") pink 2.5cm bottom no-repeat;
}
.exampletwo {
background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") purple left 4em bottom 1em no-repeat;
}
.examplethree {
background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png");
background-position: background-position: bottom 50px right 100px;
}
</style>
</head>
<body>
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Conclusion
The initial value for the background-position is 0%. This property is applicable to all elements and also to ::first-letter and ::first-line. It is not an inherited property. Here, percentages refer to the difference in the size of the background-position area and the background image size.
