Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Adding An Overlay To Your Header Image

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

The first few versions of Acabado had a dark grey overlay on the image for the hero section. This below Custom CSS code will allow you to simulate this effect again helping to split the text from the background when you have a bright image.

Learn How To Add Custom CSS Here

section.hero-container {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(https://www.insertyoururlhere.com/image-location-here.jpg) !important;
}

Make sure to replace the image in the code above with your local hosted image using the URL from your media area.

BEFORE

AFTER

I actually love this tweak and will probably add it to my site, comment below on your thoughts.

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content