Hi there...

 

I have a <div> tag with a CSS background image. This background image is repeatable so that when the user adds more content the background carries on beneath.

 

To make the page consistent and give it a better look I also have a bottom part to the background. This bottom part is an <img> within the <div> - at the bottom...obviously.

 

At the moment the <div>'s CSS background image is showing below the <img>. Is there a trick so that the <img> appears below the CSS background?

 

Here's the code and an image of what I'm trying to do...

 

<div id="content">

     <h1>Friendly Harpenden based service for Home and Home Office PC's and Laptops</h1>

 <ul>
           <li>Home visits</li>
           <li>No call out charge</li>
           <li>No fix, no fee</li>
           <li>Free local collection and delivery within 15 miles of Harpenden</li>
           <li>Over 15 years experience</li>
           <li>Please click <a href="services.html" title="Click to go to Services Page">'Services'</a> tab above for full list of services offered</li>
       </ul>


       <img id="content_box_bottom" src="images/content_3_bottom.png" />

</div>

place the image code after the div id content closing tag

Hi,

you want <img id="content_box_bottom" src="images/content_3_bottom.png" /> outside of the content div. You might find that there will be a small gap between where the content container ends and where the content_box_bottom container starts so a bit of negative margin-top should sort you out.

 

Hope that helps

....so a bit of negative margin-top should sort you out.

 

Hope that helps

 

 

That's the one! I couldn't figure out how to get rid of that negative space by placing it outside the <div>....thanks!