[Resolved] Darken gradient overlay for header background image

[William]

Hi there,

I use the featured image of posts as the background for the header element.

It looks great for images such as this. But, for others such as this, the text can be a little difficult to read, due to the image in the background. This applies for both desktop and mobile.

I currently apply a box-shadow over the image to darken it to make it easier to read, inside the header element. Is it possible to have the box-shadow become gradually darker, starting at the point of either when the title is, or where the description/excerpt starts, for both desktop and mobile?

[David]

Hi there,

tricky to add the shadow and keep it responsive, especially if the hero content size varies from post to post.

How about adding a little text shadow to the hero content:

.page-hero {
  text-shadow: 2px 2px 2px rgba(0,0,0,0.75);
}

In the property above the 3rd: 2px is the blue radius. At 2px it adds a hard fill behind the text, but you can also set it to much higher value eg. 16px to have more subtle background.

Let me know.

[William]

Ah gotcha – I think that just about works for me. Thank you for that help.

Is there anyway to make the box-shadow a gradient anyway? Just so I can compare and contrast what you provided above with that?

[Leo]

A post like this might help:
https://stackoverflow.com/questions/9649706/css3-box-shadow-linear-gradient

[William]

That’s really helpful thanks! With this, I want something like I’ve done in yellow:

The only issue is that I don’t know how to create such CSS to work on the image overlay shadow for just that page hero?

[Leo]

Not sure if I fully understand the question.

So basically you want to apply that effect to a specific page hero only?

If so add a custom class like special-gradient:
https://docs.generatepress.com/article/header-element-overview/#element-classes

Then the CSS would be:

.page-hero.special-gradient {
    CSS here
}

[William]

That makes sense thank you. I can create such a class that:

	.special-gradient {
		background-image: linear-gradient(0deg, rgba(20,20,20,0.7),rgba(20,20,20,0.1));
	}

But how would I make sure the featured image is the background, with the overlay shadow of above ontop of it, in CSS?

[Leo]

Hmm I’m not sure if this method will work for featured images unfortunately.

Can you try replacing background-image with background?

[William]

Just changed and does not seem to have made a difference.
Is this a limitation or is it possible to have a linear gradient overlay ontop of featured images in the hero element?

[Leo]

Try this solution:
https://generatepress.com/forums/topic/linear-gradient-overlay-on-headers/#post-1031099

[William]

That’s it, perfect. Thank you so much, huge help!

[Leo]

No problem 🙂

[Author]

Posts