More of Centred Background image is revealed as window is resized larger using CSS

Here is the requirement:

  • Image is centred in window
  • Image is full width of window
  • As window size grows, more of the image is revealed on both sides of the image (as opposed to resizing the image to always fill the available space)
  • Text below the image is constrained to a specific size
  • Horizontal scroll bar appears when window is resized smaller than the size defined for the text.

Here is the code that I used to create a suitable result. There may be some unnecessary styles in here but once I got it working the way I wanted, I stopped making changes.

 

<style type="text/css">
#wrapper {overflow: hidden;}
body {overflow: auto;}
#content {position: relative; float: right; right: 50%;}
#content_wrapper {width: 1160px; margin: 0 auto; overflow: visible; clear: both;}
#content_wrapper img {position: relative; right: -50%;}
#content_wrapper_text {width: 1160px; margin: 0 auto;}
#content_text {}
#CHANGE TIME {}
</style>
</head>

<body>
<div id="wrapper">
    <div id="content_wrapper">
        <div id="content">
        <img src="/Graphics/NEW_ACTION2.jpg" />
        </div>
    </div>
</div>    
    <div id="content_wrapper_text">    
        <div id="content_text">
            <p>asdf asdkfhasldkfh sdkufi uyhv duyv dfvneiuy ;dfbhuiwehf eafuyhasdkvnlsufgh0q3984h njkfbi87hsdfv kjhsdi8gy si o8u i78d 6WEFOIASD O87VA7F Y O89Y O87SDF LDIUHP9ASYF ASDF YDFV NIOKYUV HOIHDVOI A7 2O348 YOASDYFVHLAKJDSN VOD87FG LA4JIHOPV98Y ALIHFDIUAHDO78ADOFUIGH LIUFGH OAY ALSUHFO AHDO AISYF 0AO98HDVOS9V78Y OUIN3K09VPZDFLHLD OUHP0 UER YOLA9ER8 O89A PA9EW AEHALGIO HOAE9R8 HALIHOAW9 V8HA VOERH VL8HEAVO 98AER V98HAEO7 </p>
        </div>
    </div>

 

Main Menu