Problems with CSS 'Header Image' - How to make fluid??

Discussion in 'CSS' started by slimboyfatz32, Jan 23, 2008.

0
  1. #1
    Hi all ,

    Here we go with my first post .... I have a site i am constructing in XHTML & CSS ...... i have a header and footer image which i want to incorporate into the page , but having problems making them expand etc with the browser window ...the image is 1000px wide as i am designing for users with 1024x768 and above!! Of course this looks fine at 1024x768 it fits perfectly , but of course when i take it back up to 1280x1024 (the res i design in) there is a large gap to the right hand side of my header ...... is there anyway to make the header / footer expand with the window.........help greatly appreciated !!!

    PS . I have seen people use a small spacer image before ?!?! how is this done??
     
    slimboyfatz32, Jan 23, 2008 IP
  2. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #2
    AFAIK no, you cant use CSS to "strech" an image to 100% of the browser. But if the image is comprised of a large area of just on colour you could expand that part of the image using css. Then have two images, one to the left of that area and one to the right.

    I guess that made no sense at all. Anyway, to make a "colour" strecth to 100%, say it be in a <div id="header"> use;

    
#header
{
background-color: #colour;
width: 100%;
}
    Code (markup):
    And I am pretty sure that the "experts" will come along here and tell you that we try and avoid using spacer images now.
     
    nicangeli, Jan 23, 2008 IP