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.
Related Posts
- 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?
{ 5 comments… read them below or add one }
Worked a charm, thanks!
Awesome!
Thanks, this is great! Some examples use a background image, which I think is often semantically incorrect.
Thank you so much. I was also trying to avoid using a background image, as it was hard to size it within the space (when the image is changing dynamically and not the same size). As usual, a css positioning problems that I have been struggling with for an hour or so has such a simple solution.
I try to use this method where i put a text and another php object and placed it on the image which i add a link on the image..but it wont work in Internet explorer, works only in morzilla and google chrome…help!!