Assessment wanted for Creating fancy letterheaded paper exercise

I completed this task: Challenge: Creating fancy letterheaded paper - Learn web development | MDN

My code: https://codepen.io/user4292357/pen/ExKyWqG

I couldn’t set top and bottom gradient to images, this didn’t work:

    background-image: url(top.png) linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
        url(bottom.png) linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

How should I do it?

Also, I didn’t get how to do this:

Now comment out the filter and implement the drop shadow in a different (slightly more cross-browser compatible) way, which still follows the shape of the round image.

Please review the code and help finish the parts related to these two questions.

Hello @bb8

for the background check this
background: top no-repeat url(https://i.postimg.cc/yNr7dVrp/top.png) ,linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),bottom no-repeat url(https://i.postimg.cc/JnDMH9fr/bottom.png) ;

the issue was the arranging of the attribute when i started with css chris helped me with stick to the order of the attribute value espicaily the shorthand

check this one https://developer.mozilla.org/en-US/docs/Web/CSS/background to know the order

for shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

box-shadow: 5px 5px 5px black;

hope that help and have a nice day

@justsomeone thanks for review.
i corrected the order, and it’s almost working. only the gradient is applied to whole page instead of just top and bottom, why is that?
i updated the codepen

and it was asking 2 ways of creating shadow for logo, what’s the second one?

ops sorry my bad i thought it require the full page i forgot the task heheh let me dive into it again

@justsomeone okay, just let me know

check this

background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)) right bottom 975px ,top url(https://i.postimg.cc/yNr7dVrp/top.png) , bottom url(https://i.postimg.cc/JnDMH9fr/bottom.png) ,linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)) right top 973px ;

background-repeat: no-repeat;

but i recommend that you do not use shorthand with multi image as it really hard

so for me i recommend to use background image and put all your image then background-size to manage their size if you like and so one for other stuff

just stick to the order of the image you choose and if there option you want to apply to all then just use it once as i did with background repeat

one thing to notice the top is darker than the bottom cause the way it used the background make the linner position start cause that that effect
i do not know how to explain that but try to play with the value for the top linner add and decrease it and you will get what i am trying to say

hope that help and have nice day :slight_smile: