[Support request] Page headers with gradient overlay

[Altti]

I’ve done a page header that uses feature image and color overlay. How can I change the solid color to gradient? There’s linear gradient in CSS but you can set only one color. If I try to change it to CSS it removes the image, as they are in the same class.

[Tom]

Hi there,

You would have to include the image URL as well:

.generate-content-header {
    background-image: linear-gradient(0deg,rgba(20,20,20,0.77),rgba(20,20,20,0.77)),url(IMAGE URL HERE);
}

Let me know if you need more info 🙂

[Altti]

Hi Tom,

Was working on another project so kind of forgot about this. That CSS wont work as I use the feature-image as background-image and that will override it.

I assume there’s no way to achieve this?

[Leo]

Hmm maybe give David’s method a shot here: https://generatepress.com/forums/topic/solid-gradient-background-for-page-headers/page/2/#post-398794

[David]

Just following to see if it works for others. Be good to hear. It works damn fine for me!

[Author]

Posts