EN
CSS - background image position using keyword values
0 points
In this article, we would like to show you how to set background image position using keyword values in CSS.
Quick solution:
xxxxxxxxxx
1
div {
2
background-position: top; /* example value */
3
}
In this section, we use keyword values such as top
, right
, bottom
and left
to set the image position.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
body {
6
display: flex;
7
}
8
9
div {
10
height: 100px;
11
width: 100px;
12
border: 1px solid black;
13
margin: 5px;
14
/* background properties */
15
background-image: url('https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png');
16
background-size: 50px;
17
background-repeat: no-repeat;
18
}
19
20
.top {
21
background-position: top;
22
}
23
24
.right {
25
background-position: right;
26
}
27
28
.bottom {
29
background-position: bottom;
30
}
31
32
.left {
33
background-position: left;
34
}
35
36
</style>
37
</head>
38
<body>
39
<div class="top"></div>
40
<div class="right"></div>
41
<div class="bottom"></div>
42
<div class="left"></div>
43
</body>
44
</html>