Colour Overlay for Page Header Images

Home Forums Support Colour Overlay for Page Header Images

Home Forums Support Colour Overlay for Page Header Images

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #245108
    Daniel

    Would be great if we could have colour overlays for pages header images like you can with videos.
    Or can this already be done somehow?

    #245200
    Tom
    Lead Developer
    Lead Developer

    Currently it’s not possible without some custom programming, but it’s something I’m looking into πŸ™‚

    #245210
    Daniel

    It would really be a great addition if you could add that feature πŸ™‚

    #245225
    Tom
    Lead Developer
    Lead Developer
    #245412
    Lyle

    Daniel,

    Actually, it’s not that difficult πŸ™‚ Using Tom’s handy dandy Simple CSS plugin, you can add this into the CSS meta box that will be there on each page:

    .generate-content-header {
        background-image: linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url(http://stuffingeneral.com/wp-content/uploads/2016/11/lyle_wzz1.jpg);
    }

    You will of course need to adjust for the color(s) and opacity (this setting provides a light overlay) as well as the actual path to your own image. Works a treat πŸ™‚

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #245421
    mikei

    That’s what I did last night with the page header)

    #245436
    Tom
    Lead Developer
    Lead Developer
    #245533
    Daniel

    Like it Lyle! Thanks

    #264229
    Daniel

    This method did not work well for me. Also the opacity effects the text content in the page header too.
    Would be good to see this feature added so it works like the video option.

    #264293
    Tom
    Lead Developer
    Lead Developer

    Which method did you try? Opacity shouldn’t be used in this case.

    #264381
    Daniel

    Sorry, I meant using Lyle’s method. I will test again, maybe I am seeing things πŸ™‚

    #264396
    Lyle

    Daniel,

    I see what you mean by the overlay affecting the content as well. So, then try this πŸ™‚

    Change the selector in my first example, .generate-content-header to this .inside-page-header-container

    Just tried it and everything placed in the Page Header > Content area (text, shortcodes from Elementor, etc.) does not have the overlay applied. Same goes for the site header elements (Title, tagline, nav, etc.)

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #264397
    Lyle

    Just noticed that I also had to add background-repeat: no-repeat; πŸ˜‰

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #509588
    Ivan Cazorla

    Hi there! Is it yet possible to add color overlay on the image?

    thanks,
    ivan

    #509791
    Leo
    Staff
    Customer Support

    Hi there,

    Like an image not in page header? If so can you start a new topic?

    Thanks!

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.