EN
CSS - custom background image position
0
points
In this article, we would like to show you how to set custom background image position using CSS.
Quick solution:
div {
background-position: top 10px left 20%; /* example value */
}
Note:
The default value of
background-positionproperty istop 0 left 0(top-left corner).
Practical example
To set the background image position, you can use custom values and various units (e.g 10px, 15em or 25%).
Below we present example cases of custom background-image position.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
display: flex;
}
div {
height: 100px;
width: 100px;
border: 1px solid black;
margin: 5px;
/* background properties */
background-image: url('https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png');
background-size: 50px;
background-repeat: no-repeat;
}
.custom-1 {
background-position: top 10px left 30px;
}
.custom-2 {
background-position: bottom 5% right 1em;
}
.custom-3 {
background-position: bottom 25px left 30%;
}
.custom-4 {
background-position: bottom 1em right 30%;
}
</style>
</head>
<body>
<div class="custom-1"></div>
<div class="custom-2"></div>
<div class="custom-3"></div>
<div class="custom-4"></div>
</body>
</html>