Skip to main content

Forums

This topic contains 2 replies, has 0 voices, and was last updated by  ianperrett 11 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23080

    ianperrett
    Member

    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

    #49111

    Chris Coyier
    Keymaster

    This reply has been reported for inappropriate content.

    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.

    #49202

    ianperrett
    Member

    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.

icon-link icon-logo-star icon-search icon-star