Solved

CSS: Place IMG as background

Posted on 2007-03-17
5
911 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

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.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 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

7 Experts available now in Live!

Get 1:1 Help Now