Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Footer background image

Discussion in 'Website Design Forum:' started by solvaworld, Jul 23, 2010.

  1. solvaworld

    solvaworld Member

    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

      <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

    /*************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;}
  2. Mark Alexander

    Mark Alexander Senior Member

    You have no file extension on your footer image path.
  3. solvaworld

    solvaworld Member

    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.
  4. glenwheeler

    glenwheeler Senior Member

    Why all the cuses of the classes and everything?

    what you basically need is a footer say 300px 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.

Share This Page