Question

I have a rotating image header (using jquery Cycle) that has a width of 1400px.
The site it sits within has a width of 960px.

When the browser is resized – I get horizontal scrollbars at 1400px.
I need them to ONLY start at 960px – NOT 1400px.

Is this possible? I also need the header image to remain centered on resize.

You can view the site and the issue here….

http://108.174.144.176/~momandpo/

Answer 1

You should force the container and the children to 100% width so it won’t enlarge the layout. Since you use a centered background image, it will stay centered and be automatically cropped depending on the window width.

#bg_containers,
#bg_containers > div {
  width: 100% !important;
}

To avoid using !important, you can modify the script to not set a fixed width on these items.