CSS Multiple Backgroud Images

CSS Multiple Backgroud Images


This is my code:

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;

I used my own images and it ended up looking like this:

What am I doing wrong?


What exactly are you trying to accomplish? If you want them stacked on top of each other than to would need to create a HTML section or a div. If your using the w3 schools (https://www.w3schools.com/css/tryit.asp?filename=trycss3_background_multiple) example verify the section of your HTML has a div id=“example1” like the example does.


Hey. Yeah I was doing the exercise on w3schools.com about multiple background images. I used my images since I couldn’t capture theirs off of the page. Apparently you need to set the width and height of the element so that the background can fill it completely. They didnt specify width and height for the div element and magically it works for them. So I solved it like this:

*I set the width and height for the div element.

*Set the repeat to no repeat for both (since they were using repeat to repeat the paper background. I didn’t need to do so since my underlying background is a complete image and doesnt make sense to repeat) and

*switched the positions so that the smaller image is the one on top.

The rest is work I did unrelated to this.

Here is the result:

Teacher ain’t always right! Haha
Thanks for the reply tho.

And yeah all of the id’s and classes have been applied on their corresponding elements.