I am working on a design with a big picture header.

This picture displays the subject of the website and on it is an accompanying text and a "conversion area" a form that starts a process.

Now I have fiddled around a bit with several options. But I tend not to get the result desired.

enter image description here

I am worried that if I place the text "here" that if I add a black translucent panel I will lose the attention grabbing effect of the conversion area. The "text here" will become readable but won't have the effect desired.

Keeping the "text here" white does work but is pretty much unreadable.

Now what are my options? Is there anyone with an idea how to solve this?

*edit : except for the fact that my Question has been answered. I would still like to explain why my question is different. At first, my question is about web-design. Not graphical editing in an image. Second it is about selling point promotion. Leaving the conversion factor in tact. The two examples below gave me a pretty good indication of what to try.

The solution in the given question as duplicate are very different to what suited my needs.


1 Answer 1


I would try:

  • dark text in huge font size (white text shown below, but dark can work better with your image)
  • process the image so its a bit more faded, blurred, tinted, grayscale, etc. see what works
  • use high contrast elements for the 'conversion area'

enter image description here

enter image description here

  • Thank you. I went for a dark layer in a pseudo class ::before rgba(0,0,0 0.4); And set the font as very large. And as the amount of text in the field is low. It works out pretty nice! Thanks!
    – Alex
    Apr 3, 2019 at 11:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.