Design Considerations: How to Place Text Over Images

Posted on by Mario

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

1
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:

1

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.

1

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

1

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.

1

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

1

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

1

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.

1

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.