Adding Color Overlay to Banners

bmota025 · Member · Dec 3, 2018 at 2:39 pm
Copy link

Add topic to favorites
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!
bmota025 · Member · Dec 3, 2018 at 3:28 pm
Copy link
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/
bmota025 · Member · Dec 3, 2018 at 3:28 pm
Copy link
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/
yashitamittal · Member · Dec 4, 2018 at 1:58 pm
Copy link
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/
bmota025 · Member · Dec 7, 2018 at 6:57 pm
Copy link
Thanks for your response! This didn’t seem to work, though, even after I coded it “important.”
yashitamittal · Member · Dec 8, 2018 at 7:26 am
Copy link
Hello again!

Could you please let us know your website address so that we can help you?
charleybea · Member · Dec 10, 2018 at 6:48 pm
Copy link
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!

The topic ‘Adding Color Overlay to Banners’ is closed to new replies.

WordPress.com forums

Adding Color Overlay to Banners