How to prevent image that extends beyond the browser window setting the width of the page?

Question

I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.

The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.

The navigation DIV currently has the following CSS:

#nav {
    position: absolute;
    top: 210px;
    left: 50%;
    margin-left: -960px;
}

The body has a min-width of 900px.

There are two issues I am having with this setup:

1. As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.

2. The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.

Could someone help with these issues?

Thanks,

Nick

Answer 1

What I would do is

1. Cut out the middle part of the image (the one with the actual content).

2. Take out a slice from the line background that can be repeated infinitely. Like so:

3. Put the middle part of the image into a div that is 100% wide and has

   background-image: url(/path/to/slice.png);
   background-repeat: repeat-x;
   

that will give you an infinitely resizable navigation area, without needlessly expanding the page.