# Adding a colour overlay to an image

**URL:** <https://community.hubspot.com/t/adding-a-colour-overlay-to-an-image/79040>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [April 11, 2023, 8:42am UTC](https://community.hubspot.com/t/adding-a-colour-overlay-to-an-image/79040 "2023-04-11T08:42:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JHardy43](https://avatars.discourse-cdn.com/v4/letter/j/bb73d2/32.png) [@JHardy43](https://community.hubspot.com/u/JHardy43)\
**Post date:** [April 11, 2023, 8:42am UTC](https://community.hubspot.com/t/adding-a-colour-overlay-to-an-image/79040/1 "2023-04-11T08:42:30Z")

</div>

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](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](https://info.sygnaturediscovery.com/google-ads-test?hs_preview=qafLEjDn-109493823764)

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

---

<div class="post-metadata">

**Author:** ![himanshurauthan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/himanshurauthan/32/53076_2.png) [@himanshurauthan](https://community.hubspot.com/u/himanshurauthan)\
**Post date:** [April 11, 2023, 9:21am UTC](https://community.hubspot.com/t/adding-a-colour-overlay-to-an-image/79040/2 "2023-04-11T09:21:13Z")

</div>

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:

```lia-code-sample
.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.