Assessment wanted for Creating fancy letterheaded paper - browser issue

MDN Learn
#1

I’ve been stuck on styling the background: no matter what I write, the browser discards the first declaration in “article” (the one with the two images and the gradient) and selects the fallback. I’m using the latest release of Firefox, so I don’t think the browser is the issue in this case.
Secondly, the browser does not apply the shadow in the logo, and I don’t know what the problem is.
Here is my code, and I would be glad to have some kind of feedbacks.

/* Your CSS below here */

article {

background: url(top-image.png),

            url(bottom-image.png),

            linear-gradient(rgba(0,0,0,0.35) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,0.35));

background-repeat: no-repeat, no-repeat, no-repeat;

background-position: top, bottom, top;

background: url(top-image.png) no-repeat top;

background-color: white;

border-top: 1mm solid red;

border-bottom: 1mm solid red;

}

h1 {

background-image: url(logo.png);

/* filter: drop-shadow(2px, 2px, 4px, black);*/

filter: drop-shadow(5px, 5px, 5px, black);

}

#2

Hi @Witt997 and welcome to the community :wave:

Old browsers will apply the fallback background and ignore the multi-background they don’t understand. On the other hand modern browsers understand both declarations and will apply the last one they encounter.
Therefore the fallback background needs to go on top of the other backgrounds. This way modern browsers will overwrite the fallback declaration with the multi-background declarations.

As a general remark I would avoid mixing the short-hand property background with the individual ones. Either change the top background to background-image (since it only contains the images) or, what I prefer to do, just using the background shorthand property for everything. Then all the values for one background are grouped together and you would separate multiple backgrounds with commas:

background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.2)),
            url(top-image.png) no-repeat left top,
            url(bottom-image.png) no-repeat left bottom;

Try removing the commas.

I hope that helps. Feel free to ask more questions if you like. :slightly_smiling_face:

Have a nice day,
Michael

#3

Thanks a lot!

Now it worked, and I learned a lot too!

1 Like