Q:

How to apply multiple background images to an element using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  290 
Very Easy
0

How to apply multiple background images to an element using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS3 background property

In CSS3, you can add or apply multiple backgrounds to an element. The backgrounds are placed on the top of one another like layers, where the first background you specified will be on the top whereas the last background will be in the back. Also, the last background can include a background-color.

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding Multiple Background Images to a DIV Element with CSS3</title>
<style>
    .box {
        width: 100%;
        height: 500px;
        background: url("/examples/images/birds.png") no-repeat center,  url("/examples/images/clouds.png")  no-repeat center, url("/examples/images/sun.png")  no-repeat 10% 30%, lightblue;
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to create fixed header or footer using CSS... >>
<< How to remove outline around text input boxes in c...