The used background property are listed below:
<!DOCTYPE html> <html> <head> <style> body { text-align:center; } h1 { color: #b219d4; } #GFG { background-image: url(logo.jpg), url(b1.jpg); background-position: center, center; background-repeat: no-repeat, no-repeat; background-size: 400px 200px, 500px 400px; padding:25px; height:421px; } h2{ color: #14f59b; } </style> </head> <body> <div id = "GFG"> <h1>Bajarangi Soft</h1> <h2>Set Multiple Backgrounds</h2> <br> <br> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style> h1 { color: green; } body { text-align: center; } #GFG { background: url(https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6-1.png) center no-repeat, url(https://media.geeksforgeeks.org/wp-content/uploads/backgroundimage-1.png) center no-repeat; background-size:400px 200px, 400px 400px; padding:25px; height:400px; } </style> </head> <body> <div id = "GFG"> <h1>GeeksforGeeks</h1> <h2>Set Multiple Backgrounds</h2> <p> Element contains two background images </p> </div> </body> </html>