Can I add a background overlay on the hero images?
Maybe you plan to use some lighter images on the hero which means that the hero content will bit harder to read. There is a quick solution to solve this particular struggle via a CSS snippet:
.c-hero__wrapper {
background-color: rgba(0,0,0,.5);
}
Simply add the CSS code above in Appearance→ Customize → Additional CSS area and everything should look something like this:
![](https://d3vv6lp55qjaqc.cloudfront.net/items/2O1Z360q1S1E3m2G2P2x/Image%202017-05-10%20at%202.30.22%20PM.png?v=ee2cad58)
You can always adjust the rgba value in order to suit your needs.
Updated on May 11, 2021