Assessment wanted for fancy letterheaded paper and help with something!

This is my work but I have problems with 2 things: I don’t know how to apply a background on top of the background images, and the second one is I don’t find any fallback for browser compatibility on this.

Thank you for your time!

Hi @das.serban

Have a look at linear-gradient(). You’ll need to put the gradient as first background-image followed by the two url()s.
I would also recommend using the shorthand property background and group the repeat and position there together with the image.
Some older browsers don’t understand multiple comma-separated backgrounds. So the compatibility solution would be to put a single background above the multiple backgrounds. Older browsers use the single background and ignore the other and modern browsers will replace the single background with the more complex one that follows it.

I hope that gets you further. I intentionally didn’t post solution code to let you figure it out yourself, but feel free to ask for more guidance if you get stuck. :slightly_smiling_face:

Michael

Hello, I get stuck, again, I put linear-gradient() on a background shorthand property, the question is I don’t know to position only on top and bottom, the gradient is on the entire document.
background: linear-gradient(0deg, rgba(0,0,0,0.21), rgba(0,0,0,0.21)),no-repeat top url(top-image.png), no-repeat bottom url(bottom-image.png); – i have to work on opacity to figure out the best but this is my declaration. I try all to position that gradient but is not working.

Thank you for your support! :grinning: :smiley:

1 Like

You’ll need two more color stops with full transparency between your existing color stops. This will make the gradient change from grey to transparent to transparent to grey. If you set the middle color stops at the right percentages, the main part of the letter will still appear white.

Gradient solution 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))

Cheers,
Michael

1 Like

Thank you for your support!

1 Like