Text On Image
Take the pain out of building site search with the Algolia hosted API. Start free now!
How to easily add text to photos and images.This tutorial will walk you through the process of adding text overlays to photos and images. FREE DOWNLOAD: So.
Slideshow Slideshow Gallery Modal Images Lightbox Responsive Image Grid Image Grid Tab Gallery Image Overlay Fade Image Overlay Slide Image Overlay Zoom Image Overlay Title Image Overlay Icon Image Effects Black and White Image Image Text Image Text Blocks Transparent Image Text Full Page Image Form on Image Hero Image Blur Background Image. Use Yandex.Translate to translate text from photos into Czech, English, French, German, Italian, Polish, Portuguese, Russian, Spanish, Turkish, Ukrainian and other. ADD TEXT TO PHOTOS AddText is the quickest way to put text on photos. Start now – it's free! From Computer Device. Drag your photo here to get started! You can also open any image by simply dragging it into this window!
I enjoyed Erik D. Kennedy’s post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically.
Tinting
The image should be dark, and not have a lot of contrast-y edges.
Picking an image is up to you, but let’s say it isn’t particularly dark. You could darken it in an image editing program, or, with CSS, overlay a transparent color. Probably the cleanest way to do that is to use multiple backgrounds, but that isn’t super obvious how to do. The trick is using a gradient that doesn’t gradient-ize (doesn’t fade from color to color, is just solid).
See the Pen Darken Image with Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.
And while a black overlay is simplest and most versatile, you can certainly find colored overlays as well.
Indeed with this method you can color however you want from the comfort of CSS:
See the Pen Darken Image with Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.
White Text
The text has to be white — I dare you to find a counter-example that’s clean and simple. Seriously. Just one.
I find this to be true as well, at least when trying to be classy whatsoever. Garbage magazines tend to go with yellow.
See the Pen myPMGB by Chris Coyier (@chriscoyier) on CodePen.
Full Page Images
One way in which it’s rather unavoidable to set text on an image is when you make the entire screen fill with a background image. We’ve covered how to do that before, you’re best bet is:
See the Pen zxqdev by Chris Coyier (@chriscoyier) on CodePen.
And by the way, if you wanted to cover the entire screen like this, but then be able to scroll down for more, you could set the top area as having a height of 100vh units.
See the Pen myPMvp by Chris Coyier (@chriscoyier) on CodePen.
Browser support varies a bit there. You might wanna have a fixed height fallback and/or do it with JavaScript.
Text-in-a-box
This is dead simple and very reliable. Whip up a mildly-transparent black rectangle and lather on some white text. If the overlay is opaque enough, you can have just about any image underneath and the text will still be totally legible.
Works with any contrast-y color combination.
See the Pen Darken Image with Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.
With a single line of text, this is easy. But if there is any chance of the text breaking, it’s harder. You could leave the title as display: block; but it’s not as elegant perhaps as inline. But with inline, you need to take care that the spacing around the line breaks isn’t awkward.
We’ve covered this before. I think it’s coming down to box-decoration-break as being the way forward:
See the Pen Multiline Padding with box-decoration-break by Chris Coyier (@chriscoyier) on CodePen.
Blurring
Text On Image Css
A surprisingly good way for making overlaid text legible is to blur part of the underlying image.
One way to do that is to to have a section of the area inherit the same background, position it the same (fixed attachment is one way), then blur it.
See the Pen yyOodm by Chris Coyier (@chriscoyier) on CodePen.
That’s using a color bar in addition to the blur, but you don’t necessarily have to. You could blur it enough it works OK:
See the Pen ZYWXEY by Chris Coyier (@chriscoyier) on CodePen.
Softening just part of the image like this Erik is calling a scrim.
A scrim is a piece of photography equipment that makes light softer. Now it’s also a visual design technique for softening an image so overlaid text is more legible.
Floor Fade
The floor fade is when you have an image that subtly fades towards black at the bottom, and then there’s white text written over it.
This is perhaps fairly obvious since we’ve been using gradients to tint, but…
See the Pen ByKwaq by Chris Coyier (@chriscoyier) on CodePen.
Text On Image In Bootstrap
You can possibly get away with less image darkness if you combo it with a little text shadow:
Text On Image App
In closing…
Text On Image Free
- It’s pretty fun to find other ways and play with combining these techniques
- I’m sure you’ll find browsers in which these demos fail. Maybe we can use the comment thread to discuss fallback possibilities.