How to place text on top of images?

[dougancil]

I am converting a psd file to html and I have an area that is an img file that I need to have text on top of and still have the background image show through. I've looked at layering this with dreamweaver and <div> tags but when I look at the live page, the background image isn't showing through. Can you put text on top of an image and have the layer (except for the text) be transparent??

Any help would be appreciated,

Thank you

Doug

[JKing]

Just for clarification. You have a background image and on top of that you want to place an image that should be transparent and on top of that you want to have text? Is this correct?

Do you have an example or a picture that could clearly display what you are attempting to do?

[Bryan Cheung]

If the image must be transparent, why the use of it. Like JKing said, a example would be very helpful.

But on first sight I would say; a div with on top of that a paragraph which has a background.

-Bryan

[Gauarv Kumar]

The only way you can do it is to first make you image transparent using photoshop etc and then use this image as backgroung in your <div> tag over the background.Othe rwise if you try to make your <div>, containing the image, transparent then your text in side that <div> will also become transparent.

[Death Slaught]

Assuming that you answer yes to JKing's question.

Yes, one option would be to place the text in a separate p, div, any block level element really and position it absolutely.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	
	<body>
	
	<div id="wrapper">
		
		<!-- This division will have the transparent styles, and contain the image. -->
		<div class="transBox">
		</div>
		
		<!-- This paragaph will be positioned abosuletly, and contain the text. -->
		<p class="transTxt">
		</p>
		
	</div>
	
	</body>
	
</html>

If you would like for me to explain the CSS involved feel free to ask.


Regards, Death