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.

This article applies to Rosa, as they share the same underlying structure.

Updated on May 12, 2017

Was this article helpful?