Solved

CSS: Place IMG as background

Posted on 2007-03-17
5
922 Views
Last Modified: 2008-01-09
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
Comment
Question by:acseven
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 18742150
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
 
LVL 11

Author Comment

by:acseven
ID: 18742151
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
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 18742155
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
 
LVL 11

Author Comment

by:acseven
ID: 18742252
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
 
LVL 11

Author Comment

by:acseven
ID: 18743767
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question