What's the best way to put a title on top of an image?

I'm exploring the following options.


The image and title will be user submitted which make things a little bit harder.

The specific question is, what's the criteria I should use to pick one over the other.

  • 4
    I don't understand what's being asked? Are you asking for a "poll"? That is typically off-topic on Stack Exchange sites. Surely you know that. – Scott Aug 26 '19 at 20:45
  • I recon that came out poorly. It's not exactly a poll but a question on how to use a title over an image. – OscarRyz Aug 27 '19 at 12:56

Why squeeze it? As a phone screen can scroll down as much as needed, i would eliminate the dilemma and just move the title BELOW the picture. That way you'll always have black text on a white background and without this ever touching the actual picture.

| improve this answer | |
  • That's what I've seen. Another option I saw in google.com/travel is to add a black gradient on the background i.stack.imgur.com/T1wSn.jpg – OscarRyz Aug 27 '19 at 13:33
  • Yeap, faded gradient also a good option because it provides contrast behind the white text. – Lucian Aug 27 '19 at 15:02

Now that I'm paying attention, I've seen a lot of sites use a faded gradient below the text. It works well with clear images and of course with dark ones:

using faded gradient below text

| improve this answer | |

Contrast between the image and the text is the primary concern. Images 1 and 3 effectively deal with this. (The second choice ought to be eliminated as there will be times when this solution fails spectacularly.)

A second concern, not addressed in the examples, are longer titles. You could use a band but consider, in your design, that the title may be 3 or 4 lines.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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