Multiple background image problem

HTML-CSS
1

Hello!
Can you explain please why my second background image doesn’t show up?
this is my CSS:

html{
background-image: url(“https://s3-us-west-
2.amazonaws.com/s.cdpn.io/104215/launch-day-
boom_copy.svg”), url(“https://s3-us-west-
2.amazonaws.com/s.cdpn.io/104215/superhero-152840.png”);
background-repeat: no-repeat, no-repeat;
background-size: cover, 20%;
background-position: center center ,left top;
height: 100%;
}

2

It does appear, but it is behind the first one. At least this is what I saw when I pasted your code in codepen! :slight_smile:

Try reversing the images (put the second first) and you’ll see they’ll appear.

But usually this is not what you should do. Create an inner tag (a div for example) and add the 2nd background image to it.

1 Like
3

Thanks! If you don’t mind, can you show an example of what i should usually do?

4

Sure:

body{
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/104215/launch-day-boom_copy.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
}

div.container {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/104215/superhero152840.png");
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: left top;
    height: 100%;
}

And the HTML would look like:

<html>
<head> ... head stuff here </head>
<body>

    <div class="container">
        Other things here...
    </div>

</body>
</html>

This would be the boilerplate, but you can adjust it to fit your needs :slight_smile:

2 Likes