Solved

CSS: Place IMG as background

Posted on 2007-03-17
5
941 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

705 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