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 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 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.


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


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.

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.