Footer background image

Add a background image to the footer.

Hi all I would like a to add a background image to a footer area so the text and the image are combined.

Some thing like this

Skincare | Simple Skincare | Skincare Products from Simple


Heres my HTML for the footer

Code:
  <div class="footer">    <div class="footer_resize">      <p align="right" class="leftt"><a href="index.html">Home</a> | <a href="contact.html">Contact</a></p>      <p class="right"><span class="leftt">Designed By Jonah</span></p>      <div class="clr"></div>    </div>    <div class="clr"></div>  </div></div></body></html>

Heres my CSS


Code:
/*************footer**********/.footer {padding:0;  margin:0; border-top:1px solid #f1f1f1; background:url(images/footer-homepage1);}.footer_resize { width:940px; margin:0 auto; padding:5px 10px;}.footer p { font:normal 11px  Georgia, "Times New Roman", Times, serif; color:#9a9a9a;}.footer a { font:normal 11px  Georgia, "Times New Roman", Times, serif; color:#545454; text-decoration:none; padding:5px; margin:0;}.footer p.right { text-align:right; width:350px; margin:0; padding:15px 0 0 0; float:right;} .footer p.leftt { text-align:left; width:550px; margin:0; padding:15px 0 0 0; float:left;}
 
Hi sorry please ignore that, it does have an ext i missed have left it off. its a jpg. The issue is that when I do it with the above code the image sits on top or below the footer text.
 
Why all the cuses of the classes and everything?

what you basically need is a footer say 300px high..you then need to splt that div in two sections top and bottom. (Top for the image) bottom for the links. Add the image to the top..and then set your inline link list in the bottom and colour and styl;e how you feel.
 
Back
Top