[Resolved] Solid Gradient Background for Page Headers?

[Nicholas]

Hi, I’m using the “Page Header” add-on, on my blog index page, and would like to have it display a gradient color effect, instead of just a solid color. No image is being used. What would be the easiest/cleanest way to make the solid color into a gradient?

Here’s the page: https://landingpageschool.com/blog/ (see the green area near the top)

[Tom]

You can use a CSS generator like this: https://uigradients.com/#NeonLife

Then apply it to the header:

.blog .page-header-content {
   /* CSS in here */
}

[Nicholas]

Wow, that is an awesome resource for gradients! Thanks so much Tom. All good now.

[Tom]

You’re welcome 🙂

[Nic]

Hi, How do we apply the gradient into the new page header template?
(so that each header template has different gradient)

Thanks.
Nic

[Tom]

You would have to apply the CSS per page to change the gradient for each of them.

[Nic]

OK understood, sorry but what’s the CSS class that I should use in each of the header template page? Thanks.

[Leo]

It should be the CSS here: https://generatepress.com/forums/topic/solid-gradient-background-for-page-headers/#post-346756

Without .blog

[Nic]

This is what I did but the gradient background didn’t appear on the front end. Where did I go wrong? Thanks.

View screenshot

[Leo]

Any chance you can link me to the page where it’s not working? Thanks!

[Nic]

Sure, here’s the page. Thanks.

[Tom]

The Simple CSS box shouldn’t actually appear on the Page Header page – it won’t work unfortunately.

You’ll need to add the CSS into your global CSS, or onto the actual page Simple CSS box.

[Todd]

That is a a really great resource for gradients!

Can i change the gradient for all of the page headers in my custom css without affecting the url of the image. So in other words the image would be whatever I’ve added in the page header, but I globally change and control the overlay gradient in the custom css?

if i add the following it knocks out the image because the image url was not there, is there a way to do this?

.generate-content-header {
    background-image: linear-gradient(0deg, rgba(37,188,158,0.31),rgba(37, 56, 188, 0.31)), url(http://dev768664.customairco.com/wp-content/uploads/2017/10/Mitsubishi-Custom-Air-Heating-Cooling-053.jpg);

[Leo]

Not sure what you mean? Are you trying apply gradients on to a background image?

[Todd]

I would like to apply a global Gradient overlay to all GP page headers (or a range of page headers if possible) from a custom CSS location BUT KEEP the photo as specified for each GP page header. When I tried to apply a global gradient to all the headers like with the CSS below it seems like the gradient CSS needs to work contain the background image which defeats what I would like to do.

.generate-content-header {
    background-image: linear-gradient(0deg, rgba(37,188,158,0.31),rgba(37, 56, 188, 0.31));

[Author]

Posts