Adding a colour overlay to an image

Developer Support CMS Development
1

Hi,

Could somneone help with the below please? I’ve trying to add a colour overlay to the image code below but I’m not having any luck.

.main-content{
/* Setting the background image */
background: no-repeat center center url(“https://7062255.fs1.hubspotusercontent-na1.net/hubfs/7062255/GA%20BG.jpg”);
background-size: cover;
/* Setting the background image to fixed */
background-attachment: fixed;
}

This is the page. https://info.sygnaturediscovery.com/google-ads-test?hs_preview=qafLEjDn-109493823764

The current overlay has been applied by editing the actual image itself.

2

Hello @JHardy43

To add a color overlay to an image using CSS, you can use the ::before pseudo-element and position it on top of the image with a semi-transparent background color.

Here’s an example code that you can add to your CSS:

.main-content {
 position: relative;
}

.main-content::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5); /* Change the color and opacity as needed */
}

.main-content img {
 display: block;
 max-width: 100%;
 height: auto;
}

In this code, the ::before pseudo-element is added to the .main-content element and positioned absolutely to cover the entire area. The background-color property is set to the desired color and opacity using the rgba() color format.

Finally, the image is styled to be responsive with max-width: 100% and height: auto.

You can adjust the color and opacity values as needed to achieve the desired effect.