Archived topic
Page headers with gradient overlay
4 replies · Started by Altti on September 27, 2017
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.
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 :)
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?
Hmm maybe give David's method a shot here: https://generatepress.com/forums/topic/solid-gradient-background-for-page-headers/page/2/#post-398794
Just following to see if it works for others. Be good to hear. It works damn fine for me!
