Text Contrast Issue: How to enhance a hero image section?

Question

I'm using a hero image as a landing page for a ecommerce site. Here's what it looks like so far:

I'm having issues with the text's contrast over the background image. Any ideas on how I can make the text stand out more?

Make the hero image more darker I guest
– Yuliana Isabela
Jul 11 at 2:57 — Yuliana Isabela, Jul 11 at 2:57

moot · Accepted Answer · 2023-07-11 00:38:26Z

3

That background image has a lot of contrast in it so it's hard to get contrast over it. These are some colors from that background

A block of color would get rid of the contrast issues. This is a color from the background

answered Jul 11 at 0:38

moot

5,3211 gold badge13 silver badges17 bronze badges

Instead of a solid color, you can make a gradient overlay that goes 50% transparent at top to 100% transparent halfway down. Manage the percentages to suit. The color could come from a darker shade of what's in the photo, or if the photo will change, a gray can be used.
– Steve
Aug 10 at 18:59
The "lorem ipsum" subtext would need the background block too.
– slugolicious
Aug 10 at 19:01

Add a comment |

1 Answer 1