[Resolved] Solid Gradient Background for Page Headers?

[Leo]

Shouldn’t the CSS be something like this from the site?

background: #B3FFAB;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #12FFF7, #B3FFAB);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #12FFF7, #B3FFAB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

and not using background-image?

[David]

Hi Leo, any background you add to the .generate-content-header is going to overwrite the header image. I have noticed that the colour overlay and the image is written in the same background image property. Better still i notice that Tom has added the color as a linear gradient, but no option in the header panel to select gradient – so must of been planning ahead.

Ha ha if you guys can see the amount of edits on this post you will die laughing. Here’s the final code:

.generate-inside-page-header-content  {
position: relative;
z-index: 0;
}
.generate-inside-page-header-content:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #B3FFAB);
visibility: visible;
z-index: -1;
}

EDIT: I Just found a strange bug. If you add another comma separated RGBA colour to the Header Background image, although it gets rejected back to a transparent background it doesnt. It actually writes in a third gradient colour to what was there before, so you get a three step gradient – which is crazy lol

[Dan]

Just to add to this discussion, the CSS applied as a color layer on top of the bg image is a linear gradient (with 2 exact values), is there a way in the wp-admin of the page header to set different values to the 2 gradient stops?
I would prefer that to using the pseudo element.

See screenshot:
https://www.dropbox.com/s/x4et200lfeprq74/gp-gradient-ui.png?dl=0

Thanks
Dan

[Tom]

Hi Dan,

Currently there’s no way to do this from within the admin, but I’ll look into it 🙂

[Dan]

Thanks Tom!
Much appreciated.

Dan

[BeeLady11]

Hi – I’ve tried putting this css into the child theme’s style.css but it’s had no effect. Any suggestions?

.generate-inside-page-header-content {
position: relative;
z-index: 0;
}
.generate-inside-page-header-content:after {
content: “”;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #B3FFAB);
visibility: visible;
z-index: -1;
}

Thanks very much!
A 🙂

[BeeLady11]

Also tried:

.blog .page-header-content {
background: #03001e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fdeff9, #ec38bc, #7303c0, #03001e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fdeff9, #ec38bc, #7303c0, #03001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

(once I’ve got the gradient working, I’ll fiddle around with the colours )

[BeeLady11]

Found out how to do this. For anyone else struggling with this, I’ve used the following CSS (I used colorzilla to create the gradient very easily and left it as solid in mobile, as it looked a bit funky as a gradient. Filter line commented out as it produces an error and I’m not too fussed about any IE below 10 🙂

@media (min-width:769px) {
.inside-header{
/* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b14995+1,b14995+28,c85ec7+54,ffffff+86 */
background: #b14995; /* Old browsers */
background: -moz-linear-gradient(left, #b14995 1%, #b14995 28%, #c85ec7 54%, #ffffff 86%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #b14995 1%,#b14995 28%,#c85ec7 54%,#ffffff 86%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #b14995 1%,#b14995 28%,#c85ec7 54%,#ffffff 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#b14995′, endColorstr=’#ffffff’,GradientType=1 ); IE6-9 */
}
} /* End @media */

[Leo]

Glad you figured out!

[BeeLady11]

In action: https://essenceofhealing.co.uk/ (site still being built, but I do love Generatepress!)

[Author]

Posts