Darken images with CSS for Parallax Pro Theme

[wolfcoach]

I'm using the Parallax Pro theme for a few sites, and would like to darken the background images in the ".home-section-1", 3, and 5 for text visibility.

Since I'm using stock photos from a managed WP hosting solution, pulling them out to darken manually is a total hassle. I'd rather have a static 'screen' automatically over the background images so I can see which ones look best without having to photoshop everything.

I have experimented with a screen effect behind the text alone, but it looks kinda trashy. I'd prefer keeping the design look & feel like the default Parallax theme with the whole image subtly darkened.

Everything that I've seen in search either darkens the entire section (including the text) or removes the background image. I'd love to hear any ideas folks may have.

https://elitelandingpages.com/

[Brad Dalton]

You could use the same effect as whats used in the Essence Pro child theme https://my.studiopress.com/themes/essence/#demo-full

The CSS is added inline in the lib > output.php file.

It looks like the reason its added is to make the text readable regardless of the image used.

---

Get Help – Book Consultation.

[wolfcoach]

Great idea, and yes that is the primary reason I'm looking to darken these images - better text clarity.

It didn't work as originally expected but it did prompt a solution to be found. I modified the CSS with a hex transparency and added a color blend mode, which ultimately darkens the image via opacity. Now the images appear to have a dark overlay and text is clearer:

.home-section-1,
.home-section-3,
.home-section-5 {
background-attachment: fixed;
background-color: #00000080;
background-position: 50% 0px;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-blend-mode: color;
}

Thanks for your idea!

[Author]

Posts