Grow your CSS skills. Land your dream job.

Problem with full width bg on elastic site

  • # August 13, 2008 at 11:44 am

    Hi All,

    I am trying to build an Elastic site that sits on top of background images that stretches the full width of the browser (see target.gif). I have done it so i have a div with width set to 100% with the background image placed on this and then a div inside that set to 98em width and margin auto to center the site. I have this div set-up for the header(white bar), navigation(grey bar) and content area (dark grey bar). I have done it like this so it scales correctly.

    The issue is that when the site scales beyond the width of the browser the background images stop (breaking.gif).

    Does anybody know how to get round this.

    Cheers Ian

    # August 13, 2008 at 9:56 pm

    It looks like you can achieve your bottom image result by taking a long thin slice of everything (including the white, nav bar, dark gray, and light gray) and repeat it on the x-axis on the body element. Then it should grow as wide as the browser window and it also very efficient.

    # August 14, 2008 at 8:52 am

    Hi Chris

    Thanks for replying, the trouble with putting it on the background is that when the text size in increased or decreased the background image stays the same height and so the content looks out of place. With the current solution the backgrounds grow and shrink (particularly the nav bar) with the text size as i have given them a height value.

    The only way I can think of sorting this problem is to give the containing divs a width and use JavaScript to change this.

    btw. Thanks for creating such a great resource, it has helped me lots in learning and homing my CSS skills.

    Cheers Ian

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".