Design Considerations: How to Place Text Over Images

Placing text over image is not always easy.  Therefore, in this article we would like to give you several tips about it. If you are a web designer below are several ways that you can use to make your text fit your images beautifully.

Tinting

You can choose whatever images that you want, but let’s take a sample that isn’t particularly dark. Then using an image editing program, such as CSS to overlay a transparent color and darken it a bit. The trick is using a gradient that doesn’t gradient-ize.

.darken {
   background-image:
   linear-gradient(
           rgba(0, 0, 0, 0.5),
           rgba(0, 0, 0, 0.5)
    ),
    url(shoes.jpg);
}

Result

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:

White Text

The text has to be white – I dare you to find a counter-example that’s clean and simple. Seriously. Just one.

When you have a darker background, the right choice for your text color is certainly white. This will give a classy touch on your design. Some low rated magazine prefers to have yellow color.

Full Page Images

At some points it seems unavoidable to set text on an image, especially when you make the entire screen fill with a background image. So, here is a tricky thing to do:

body {
      background: /* do whatever tinting and stuff here */;

/* This will ensure everywhere is covered */
    background-size: cover;
}

Result

But, if you want to cover the entire screen like the example above, you should make it possible to be scrolled down, you could set the top area as having a height of 100vh units.

Your browser will support your work here. You might wanna have a fixed height fallback and/or do it with JavaScript.

Text in a Box

Works with any contrast-y color combination.

It will be easier if you put only a single line of text but it will be harder if there is any chance of the text breaking. You could write 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:

.title {
    background-color: black;
    color: #fff;
    display: inline;
    padding: 0.5rem;

   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
}

Result

Blurring

One of the ways to do it is by having a section of the area inherit the same background, position it the same, then blur it.

.module {
   background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
   background-attachment: fixed;
   overflow: hidden;
}

.module > header {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 20px 10px;
   background: inherit;
   background-attachment: fixed
}

.module > header::before {
   content: “”;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: inherit;
   background-attachment: fixed;
   -webkit-filter: blur(12px);
   filter: blur(12px);
}

Result

In the example above, a color bar is placed in addition to the blur. However, you don’t necessarily have to as you only need to blur it.

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.