EN
CSS - set multiple images as element background
0 points
In this article, we would like to show you how to set multiple images as element background using CSS.
Quick solution:
xxxxxxxxxx1
body {2
background-image: url(example-image1.jpg), url(example-image2.jpg);3
}with positioning:
xxxxxxxxxx1
body {2
background-image: url(example-image1.jpg), url(example-image2.jpg);3
background-position: left bottom, right top;4
background-repeat: repeat, no-repeat;5
}
In this example, we add two background images to the div element using background-image property with multiple urls. Additionally, we set images position and disable repeat.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div { 7
height: 100px;8
width: 400px;9
10
/* set multiple image background */11
background-image: url(https://dirask.com/static/bucket/1631891312626-6pQmxaWAb5--background-h200px.jpg), url(https://dirask.com/static/bucket/1631897134681-eZA1OxrY4z--image.png);12
13
/* images configuration */14
background-position: center, left top;15
background-repeat: no-repeat, repeat;16
}17
18
</style>19
</head>20
<body>21
<div style="color: white;">Page content here...</div>22
</body>23
</html>