#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    194
    Rep Power
    13

    Background image for Header and Footer, coded in CSS


    Hey all,

    I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer.

    I would like it to look something like this.

    I'm using this code for the background image, for the Header:

    body
    {
    background-image: url(stars.gif);
    background-repeat: repeat-x
    }

    And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page?

    Here is the code that I'm assuming would have to be used:

    {
    background-image: url(stars.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    }

    Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code?

    Thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Stratford-upon-Avon, UK
    Posts
    66
    Rep Power
    12
    Hi

    First, I wouldn't recommend anyone go to the link you gave, as there are so many popups and it takes ages to load.

    All you realy need for such a simple design is three divs in the main body. In css set the images to the background of each div. You may have to set the height of the div's to get it to show. Set the div widths to 100%. This may throw either NN or IE, so put a non-breaking space in the div's if there is no other content.

    Having said that, I see you have used tables, so you will have to move these into the div's.





    Trevor
    "Good artists copy, great artists steal." Pablo Picasso

IMN logo majestic logo threadwatch logo seochat tools logo