Placing text over image using CSS position property

. Thursday, June 12, 2008
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

There are a few techniques available to perform this task using css. But I am going to show you the most effective one in this tutorial - this involves css position property.

I will be using this image (a cow) in this tutorial.

In our html code, there needs to be three div elements
1. container (for both image and text)
2. image (the cow)
3. text (Moooooo...)

Here is the code
<html>
<head>
<title>frinity.blogspot.com</title>
</head>
<body>
<div id="container">
<div><img src="cow.jpg" /></div>
<div style="position: absolute; left: 20px; top: 160px;">
<span style="font-weight: bold; color: #fff;">Moooooo...</span>
</div>
</div>
</body>
</html>


Its the CSS positioning that makes it happen.

Output (screenshot):

19 comments:

Anonymous said...

nice tutorial. i have browsing similar tutorials. others used techniques like having the image as the element's background, but css positioning seems a better option to me.

thanks!

Anonymous said...

needed this badly! thanks dude

Unknown said...

you can also put in a z-index just to make sure that other elements do not cover the text...

Anonymous said...

not all the browsers support z-indexing (like mozilla). the method described here is the best..i guess!!

Anonymous said...

nice post..thnx

Anonymous said...

Just what I needed to know!

Many many thanks

Anonymous said...

thnx .. this is wat i need...

Anonymous said...

Here's a much simper way to do the same thing:

<div><img src="cow.jpg" />/div>

<div style="position: absolute; left: 20px; top: 160px; font-weight: bold; color: #fff;">
Moooooo...>/<div>

Anonymous said...

ok. but why wouldn't you make the image a background image of the div containing the 'mooo' text and position the text in the div by using the padding property of the div? thus text and image would stick together and could be handled more easily. or am i wrong here?

Anonymous said...

Wow thank you very very much !

Anonymous said...

the better use is
style="position: relative;"

abigoroth said...

thx.. this help alot

Anonymous said...

Moooooooo lol :)

Eivind said...

Needed this a lot, so thanks (:

booley said...

can you help me with my css slicing? i need to put text on image.

jc balang said...

this help a lot. tnx for the post.

natty said...

Thanks a lot.

Rebecca said...

Thank you so much for this tutorial, I had to float some text over a header image and all the other tutorials I found were so long winded I just got lost. Your tutorial was quick and to the point. Again, thank you!

Anonymous said...

This was completely unhelpful. Thanks.