asked on

CSS: Place IMG as background

Hi,

I need to place an image, html tag based (<img>), as a background. For this I can't use the background-image CSS tag.

So, I have this html structure:

<body>
<table class="shadow" border="0"
cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="shadow-topLeft"></td>
<td class="shadow-top"></td>
<td class="shadow-topRight"></td>
</tr>
<tr>
<td class="shadow-left"></td>
<td class="shadow-center">
<div id="header">Header</div>
<div id="content">
<p>Lorem ips dolort, consectetuer adipiscing elit. Praesent vestibulum molestie. Aenean nonummy hendrerit uris. Phasellus porta. Fususcipit varius mi. Cum sociis natoque ps et magniarturient... montes, nascetur ridiculus... mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem.</p>
</div>
<div id="footer"><img alt="Background image" src="background_image.png" /></div>
</td>
<td class="shadow-right"></td>
</tr>
<tr>
<td class="shadow-bottomLeft"></td>
<td class="shadow-bottom"></td>
<td class="shadow-bottomRight"></td>
</tr>
</table>
</body>

The tables build a frame around the div's. The ideia is to place the "footer" div's IMG as the background for the "content" div, placed in the botoom left corner of it.

Any ideas on how to successfully achieve this?

Cheers

VirusMinus

why not use the CSS background image? if its an <img> in the HTML its not a background image. How will you put text over it?

could you show a screenshot of what you're trying to do? upload it here: www.imageshack.us

acseven

ASKER

Think of placing a DIV containing text (or any given content for that matter) *over* a DIV containing an IMG placed image.

That's what I need, based on the previous HTML structure.

cheers

ASKER CERTIFIED SOLUTION

VirusMinus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

acseven

ASKER

Absolute positioning is not what I was hoping for, because it complicates my layout a bit.

Here's a screenshot, as requested:
http://img92.imageshack.us/img92/1748/exampleft5.gif

Text is in a DIV
Image is in a DIV

acseven

ASKER

Problem is solved.

All div's were assigned a position:relative property, and and positive:absolute to the image div. Layout got ajusted by the html parse order.

I accept the answer for reminding me of the positioning. For further enlightment on this issue, to control the stacking order:

http://developer.mozilla.org/en/docs/Understanding_CSS_z-index:Stacking_without_z-index
" 1. Background and borders of the root element
2. Descendant blocks in the normal flow, in order of appearance (in HTML)
3. Descendant positioned elements, in order of appearance (in HTML) "

Cheers