Solved

CSS: Place IMG as background

Posted on 2007-03-17
5
917 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

896 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now