Question

Maybe this is a no-brainer but i cant see the solution right now 🙂
I got a 960px centered content div and now i need to add a teaser which contains 2 parts, a huge background with wide shadows (2000px wide) and some foreground pics max 960px wide.
If i add the 2000px background my chrome automatically applies horizontal scrollbars because of my low 1280px resolution. What I need is that it ignores the scrollbars and let the image just get out of bounds and only been seen on higher resolutions

<div id="cotainer!> <!--! #container 960px wide, margin: auto, overflow:visible --->

  <div id="stage"></div> <!--! has the 2000px background -->

</div> <!--! end of #container -->

I hope i was able to describe my problem properly, thanks in advance for any help!

Answer 1

You’re approaching this wrong. If you want a wide background image, you’ll want to apply the background to a wrapper, and add the container inside the wrapper:

<div id="#wrapper" style="background-image:(url...);background-repeat:no-repeat;">
     <div id="container"> STUFF </div>
</div>

This will work so long as the wrapper is not enclosed by any narrower div (it will expand to fit the width of the page).