Large image causing the background to fade
I have the same problem as a div background image overflow : I have a page where I want a "header" and "footer" with the same background. Immediately under the heading is a large image and finally under that image the content.
All content (including header / footer / image) is centered and the problem is with the image (width: 1600px) and the browser size ... When it's under 1600px we can scroll and the STOPS background ... I would like it to be they've been expanded ... (I can set the body element with the same background as the header / footer, but the content will be missing ...)
Here is a jsFiddle as an example of my problem , I ended up using Wraps around different parts to set the correct backgrounds.
Here is the normal behavior, full size screen 
Here is the problem, when the browser is smaller than the content, the scroll bar appears and the background disappears ... 
I've tried many things to find a workaround. I am unable to set the minimum width: 1600px per body (in my real case) as this will cause a lot of scrolling for the low res user to find "centered content"!
If you have any suggestions or another approach to my problem, thanks in advance!
Final edit : - @Happy Singh code (using background image and overflow: hidden on imagewrap) with my added min-width for each content item. Final jsFiddle .
source to share
Try this fiddle http://jsfiddle.net/3KtSf/ , if I understand your problem correctly, maybe this is your solution;
UPDATE:
Revised fiddle ( http://jsfiddle.net/ux2pj/1/ ) as per comment requirement.
In the fiddle, the image is from the background, so the width / height of the image is 500 x 367px.
source to share