I am currently facing an issue with aligning a background image horizontally in a specific scenario:
- The background image is large and needs to be centered horizontally
- The page has a minimum width requirement of 960px which may result in a scrollbar on smaller screens
My proposed solution is as follows (pseudo code):
<bg-div> # containing the background image with "center center no-repeat" option
<content-div> # set at 960px margin 0 auto
</content-div>
</bg-div>
Here is a live example: http://jsfiddle.net/CtMRt/4/
The issue I'm encountering is that when the resolution drops below 960px, instead of stopping the centering alignment, a white gap appears on the right side of the page while the background continues to center itself. How can I address this problem?
Appreciate any insights you may have. Thank you.