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 12, 2017

Was this article helpful?