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):

20 comments:

Matthew S 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!

Allen said...

needed this badly! thanks dude

Pritthish said...

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

barronx said...

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

css ebooks said...

nice post..thnx

leoleo 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>

donald said...

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Betty


http://www.my-foreclosures.info

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?

HD 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.