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:

You can always adjust the rgba value in order to suit your needs.

Updated on May 11, 2021

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at [email protected] and we will give you a helping hand.