Bluehost: Web hosting from $3.95/month. Sign Up

CSS Tip: Placing text on top of an image

Posted on by Clive Walker in CSS Quick Tips

The other day, I needed to add a strap line or caption on top of an image. Yes, I can do this in an image editor like Photoshop or Fireworks but I wanted to compare an alternative method using CSS. The CSS method also has the advantage that the text will be read by search engines. Anyway, here's how I chose to to do it.

In order to place text on top of an image, I could simply use a background image on my (X)HTML element and add the text. This works if the image is purely decorative. In my case, it's not. The image is in the (X)HTML. That means I need to use some other method. This is the (X)HTML that we want to use.

<div class="image-wrapper">
       <img src="someimage" alt="sometext" />
       <p>The text is in a paragraph tag</p>
       </div>

It's pretty standard. The image and its associated text are contained in a <div> with a class called image-wrapper. Without any other styles, the paragraph will follow the image because it's a separate element. Now, here's the trick that we need to place the text over the image. In our style sheet, in order to position the text in relation to the containing <div>, we need to assign position: relative to the <div> and assign position: absolute to the paragraph. Then, we position the paragraph in the normal way for absolute positioning. The position: relative on the <div> is needed in order to give a new positioning context for our absolutely positioned text/paragraph. If we did not have this, the paragraph would be positioned relative to the next nearest containing block [possibly the body element] and that's not what we want here. Here's a short reminder about the CSS position property.

Here's my simple example which illustrates the method [with a few other paragraph/text styles added]. In this case, I positioned the text near the top of the image. The CSS is here:

.image-wrapper {
    position: relative;
    width: 250px;
}
.image-wrapper p {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
    border: 1px solid #FFF;
    width: 218px;
    color: #FFF;
    margin: 5px;
}

Of course, there's more that could be done with this. Perhaps a semi-transparent background image on the paragraph would give it more pizazz? Or, maybe rounded corners using the CSS3 border radius property? However, that's a subject for another day.

Comments

  • 26 Mar 2012 14:32:51

    Seems to have fixed widths embedded in the CSS, so may not work in a general context. Can’t get it to work in FF 9.0.1 with arbitrary elements. Perhaps a specific solution for img and p only.

  • 09 Jun 2014 07:29:57

    .txtOverlay{ width:390px; height:206px; opacity:0.9; font-size:20px; font-weight:700; text-align:justify; border:5px solid #FFA500; padding:5px; background: url(img/tiger-img.png) no-repeat; }

    .theText{ opacity:0; }

    .txtOverlay:hover .theText { opacity:0.9; color:#FFFFFF; font-size:20px; font-weight:700; }

    Source: http://www.corelangs.com/css/box/overlay.html

    Richard

  • 27 Aug 2014 22:22:29

    Thanks, this helped me a lot :) I was making a health bar, for a game, a php game, and only found how to add text on image here :) other suggestions wasn’t working. Thanks again

  • Santosh Nayak:

    09 Dec 2015 10:49:31

    Thanks, above code work.

  • Mojca:

    05 Feb 2016 17:44:45

    Hi!
    I am using bootstrap, so my image has class of wide wrapper, and I made image responsive with img-responsive class.
    Above solution was very helpful getting the text on the image, however I would like to make it responsive also. Any ideas how I could do that?

  • 05 Feb 2016 18:20:45

    @Mojca: This post is an old one now and absolute positioning is not great for responsive web design. I don’t know Bootstrap either but check out this post. Does that help?

  • Mojca:

    05 Feb 2016 23:23:43

    I checked just date on last post, so oops :)

    But, thank you Clive, it works perfectly!

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker