- This topic has 2 replies, 2 voices, and was last updated 4 years, 4 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
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/
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.
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:
background-position: 50% 0px;
Thanks for your idea!
© 2023 WPEngine, Inc.