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!
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.
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!
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.
Cheers,
Michael
Thank you for your support!