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 con­tent will bit hard­er to read. There is a quick solu­tion to solve this par­tic­u­lar strug­gle via a CSS snip­pet:

.c-hero__wrapper {
 background-color: rgba(0,0,0,.5);

Sim­ply add the CSS code above in Appear­ance→ Cus­tomize → Addi­tion­al CSS area and every­thing should look some­thing like this:

You can always adjust the rgba val­ue 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?