Placing Text Over an Image Using background-image

By utilizing the background-image CSS property, we can display the image in the background and text (or anything else, such as another image) in the foreground. This method is quite simple and straight forward, I recommend using this method over relative positioning, there are some benefits of using relative positioning though, so don't rule that out just yet! Okay, here is the code and a preview:

CSS:

1
2
3
4
5

.textimage {
  background-image: url('http://www.html-tips.net/images/la-photo.jpg');
  height: 225px;
  width: 300px;
}

In the CSS, I defined the width and height of the image because I want the full image to be shown. If you want the size of the image to be defined by how much content is inside the div, just take out either the height, width or both, depending on which way you want the content to flow.

HTML:

1

<div class="textimage">Los Angeles, Taken From Grand Central Market</div>

Preview:

Positioning Text Over an Image Using background-image

Positioning can be done many ways, including the use of HTML line break tags (<br />), but you can also do this in a more precise way, using CSS:

CSS:

1
2
3
4
5
6
7
8
9

.textimage {
  background-image: url('http://www.html-tips.net/images/la-photo.jpg');
  height: 225px;
  width: 300px;
}
.textimage p {
  padding: 120px 20px 0 80px;
  color: #ffffff;
}

Simply add a paragraph tag to the HTML and CSS class and give that class some padding. When defining CSS padding, specify values in a clock-wise manner (top,right,bottom,left). I also made the text white, so the text is a bit more legible.

HTML:

1

<div class="textimage"><p>Los Angeles, Taken From Grand Central Market</p></div>

Preview:

Placing Text Over an Image Using position relative

This method allows you to keep the img tag and the alt attribute of your image, if that is needed. If it is not needed, I recommend using the background-image method. Here is the code:

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.textimage p {
  position: relative;
  top: 120px;
  left: 80px;
  right: 20px;
  width: 200px;
  height: 40px; /* For getting rid of white space */
  color: #ffffff;
}
.textimage img {
  margin-top: -40px; /* For getting rid of white space */
  height: 225px;
  width: 300px;
}

In the CSS, you will only need to style the p and img tags. Use top, right, bottom, left to position the paragraph tag. If you want the text to wrap around onto a new line, use the width property. When you define position as relative, the height of the original position of the p tag stays there as white space. To get rid of this white space, define a height for the p tag and then on the img tag, specify a margin-top to the negative value of the height defined for the p tag.

HTML:

1

<div class="textimage"><img src="http://www.html-tips.net/images/la-photo.jpg" alt="Los Angeles" /><p>Los Angeles, Taken From Grand Central Market</p></div>

Preview:

Los Angeles, Taken From Grand Central Market

That should just about wrap it up for the basics of placing text over an image.