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.
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>
<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:
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!
needed this badly! thanks dude
you can also put in a z-index just to make sure that other elements do not cover the text...
not all the browsers support z-indexing (like mozilla). the method described here is the best..i guess!!
nice post..thnx
Just what I needed to know!
Many many thanks
thnx .. this is wat i need...
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>
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?
Wow thank you very very much !
the better use is
style="position: relative;"
thx.. this help alot
Moooooooo lol :)
Needed this a lot, so thanks (:
can you help me with my css slicing? i need to put text on image.
this help a lot. tnx for the post.
Thanks a lot.
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!
This was completely unhelpful. Thanks.
Post a Comment