Okay
  Public Ticket #456864
Page Header semi-transparent overlay
Closed

Comments

  • Matt started the conversation
    June 13, 2015 at 1:38pm

    Hi folks,

    Anyone know the CSS needed to put a semi-transparent image over the 'Page Header' image of a single page..?

    Ideally, I want to use the same semi-transparent image as is used on the Nectar Slider. Anyone know if this is possible, and the code required to do so?

    Thanks :-)

  •  8,851
    Tahir replied
    June 13, 2015 at 2:04pm

    Hey ,

    Could you provide the page url so i can have a look.

    Thanks

    ThemeNectar Support Team 

  • Matt replied
    June 13, 2015 at 2:11pm

    Hi Tahir,

    The URL is here: URL Removed
    Ideally, I don\'t want it to be specific to this page though. I\'d want the overlay to be present on all pages (and possibly blogs) I create - although if I need to amend the CSS each time that will be OK.

    You\'ll notice on this page that the headers have the transparency set behind them - I want to remove this, and have the whole image \'covered\', if that makes sense??

  •  8,851
    Tahir replied
    June 13, 2015 at 6:02pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #page-header-bg:before {
    content: \"\";
    display: block;
    background-color: rgba(0, 0, 0, 0.16) !important;
    width: 100%;
    height: 100%;
    position: absolute;
}
body #page-header-bg h1, body #page-header-bg .subheader {
    background: none !important;
    box-shadow: none !important;
}


    Thanks

    ThemeNectar Support Team 

  • Matt replied
    June 17, 2015 at 10:57pm

    Tahir,

    That is absolutely stunning. Thanks for the incredible support :-)

    -- Matt