Masthead gradient overlay

aurelia01

Hello

Is it possible for you to help me convert CSS for the blue masthead overlay in JA Mono to be a gradient. Currently the CSS code is:
}
.jamasthead.blend-bg {
background-blend-mode: multiply;
background-color: #2727a4;
background-position: center center;
}
I would like the background-color to be the following gradient:
background: { linear-gradient(150deg, #22A9E2 0%, #6F2B90 65%);

I have tried to change it myself but it is not working.
Thank you
Helen

saguaros

Hi Helen,

You can try this custom css:

.jamasthead.blend-bg {
  background: linear-gradient(150deg, #22A9E2 0%, #6F2B90 65%) !important;
}

aurelia01

I tried the script you have provided but it does not work.

Regards
Helen

Ninja

aurelia01
Hi
Kindly clear your browser cache and re check again, as its working fine : http://prntscr.com/r4wn4j

aurelia01

Hi Pankaj

Thanks for you assistance about. It does work 🙂

Is there perhaps a way to make the gradient visible on some pages and not on others? I am asking because I would like to have no gradient or color overlay on one or 2 pages but the rest can stay with the current gradient overlay.

Thanks
Helen

saguaros

Hi Helen,

You can use page class in Joomla to add a class to specific page and style for it.

For example, on the page 'Education', you go to backend settings of this menu >> Page Display tab > Page class >> add a class call newblend: https://prnt.sc/r9pzit

then change above css code to:

.newblend .jamasthead.blend-bg {
    background: linear-gradient(150deg, #22A9E2 0%, #6F2B90 65%) !important;
}