Adding Color Overlay to Banners

  • Author
    Posts
  • #3222696

    bmota025
    Member

    Is there any way I can add a color overlay to header banners? I’m looking to put an opaque gold overlay on all banners (the theme I’m using is “Swell,” and some of these banners are videos and some are static images) and I’m hoping there is an easy bit of CSS coding to do that. Thanks!

    #3222718

    bmota025
    Member

    If it’s helpful, I’m trying to create a look like this site has with purple overlay on all banner images: http://www.zazilmediagroup.com/

    #3222719

    bmota025
    Member

    If it’s helpful, I’m trying to create a look like this site has with purple overlay on all banner images: http://www.zazilmediagroup.com/

    #3224293

    Hi there!

    The swell theme already has overlay applied to the images. We just need to change the colour.

    You can add custom CSS to your WordPress.com blog using the CSS Editor in My Sites → Customize → CSS in your blog dashboard.

    #main header.has-background .overlay {
        background: rgba(255,215,0,.4);
    }

    You can change the colour and opacity in the code above.

    https://en.support.wordpress.com/custom-css/

    #3229100

    bmota025
    Member

    Thanks for your response! This didn’t seem to work, though, even after I coded it “important.”

    #3229520

    Hello again!

    Could you please let us know your website address so that we can help you?

    #3231631

    charleybea
    Member

    Hello @bmota025,

    Did you get this resolved? If not – to add on to @yashitamittal11’s response, try adding this CSS to apply to all banner overlays:

    .banner-thumbnail-wrapper .color-overlay {
    background-color: rgba(255, 215, 0, .4);
    }

    That should do the trick. Let us know if you still need assistance, we’re happy to help!

You must be logged in to reply to this topic.