EN
CSS - position background image in corners
0
points
In this article, we would like to show you how to position background image in corners using CSS.
Quick solution:
.bottom-right {
background-position: bottom 0 right 0; /* bottom right corner */
}
Practical example
To move the image to the specific corner, you need to set the distance from the corner you want to 0 (e.g top 0 left 0 - default value).
// 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;
}
.top-right {
background-position: top 0 right 0;
}
.bottom-right {
background-position: bottom 0 right 0;
}
.bottom-left {
background-position: bottom 0 left 0;
}
</style>
</head>
<body>
<div></div>
<div class="top-right"></div>
<div class="bottom-right"></div>
<div class="bottom-left"></div>
</body>
</html>
Note:
We don't need to set the top-left corner, since it's
background-positiondefault value.