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