Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 975
  • Last Modified:

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
0
acseven
Asked:
acseven
  • 3
  • 2
1 Solution
 
VirusMinusCommented:
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
0
 
acsevenAuthor Commented:
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
0
 
VirusMinusCommented:
you will need absolute positioning then. but if you place another div over the footer, or the footer over the content, then one of them will be blocked. That is unless you use transparency..

there's different ways and it might be easier to use a background image. it will really help to see a screenshot
0
 
acsevenAuthor Commented:
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
0
 
acsevenAuthor Commented:
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
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now