Archived topic
Gradient in background overlay
3 replies · Started by Javier on March 9, 2021
Can I set a gradient as the overlay of the background?
What I want to achieve is to have a gradient under the nav bar and logo to have more contrast with the logo.
Something as the link in private info.
I have found this solution (https://generatepress.com/forums/topic/background-overlay-supersedes-background-image-in-page-hero-element/#post-930725) but I also have a div with an svg in bottom off page hero to make a curved shape effect.
If i use this code:
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 25.57%, rgba(255, 255, 255, 0) 78.23%);
}The gradient is over the text:
If I use this:
.page-hero,
.inside-page-hero {
position: relative;
}The div with the svg shape does not fit the bottom of the hero and the width of the window.
Solved,
I haven't used the
.page-hero,
.inside-page-hero {
position: relative;
}I added position: relative; to all elements inside the hero.
Glad to hear you found a solution!
