Share This Article:

Subscribe to Kavoir:

Putting text over image or pictures is a good way to give simple title information to that image or declare copyrights without tampering with the image itself.

Real texts on an image with CSS

This lovely image gladly demonstrates how I (this text) can be flying over her face.

It’s very kind of her but don’t you agree that this place needs a camp fire and a little love?

The HTML

<div class="image">
  <img alt="" src="http://www.kavoir.com/img/text-over-image.jpg" />
  <div class="text">
    <p>This lovely image gladly demonstrates how I (this text) can be flying over her face.</p>
    <p>It's very kind of her but don't you agree that this place needs a camp fire and a little love?</p>
  </div>
</div>

The CSS

.image {
	position:relative;
	float:left; /* optional */
}
.image .text {
	position:absolute;
	top:10px; /* in conjunction with left property, decides the text position */
	left:10px;
	width:300px; /* optional, though better have one */
}

To position the text somewhere just modify the top and left property. For instance, place them at the the bottom right of the photo, just use right:10px and bottom:10px.

To have more than one text paragraphs positioned at different portion of the image, just add more <div class=”text”></div> and style them separately.

Share This Article:

Subscribe to Kavoir:

You should also read:

• Extended CSS Sprites for Foreground Images <img>
• Styling an Alphabet of 26 Letters in HTML and CSS
• 3 column layout, left and right fixed width, center fluid
• CSS: Styling File Upload / Select Input Control <input type="file" … />
• CSS: How to align HTML input checkbox and radio with text on the same line?