I am currently working on a website design using the 960 grid system and a responsive framework called 'skeleton'. Everything is running smoothly, but I have encountered a problem with the header banner. Since it is only 960px wide, there are white spaces extending beyond that width on both sides. To fix this issue, I decided to slice off 1 pixel from the image and repeat it along the x-axis.
The main problem arises because the .container class keeps everything within a 960px limit, preventing me from extending the page_home/section_header_bg.jpg image beyond that restriction. I attempted to move it outside of the .container div, but this caused the two images to not blend together seamlessly. What I really want is for them to be inline.
Everything works perfectly if I remove the .container class, but then my header will lose its responsiveness.
The issue lies in figuring out how to allow the url(page_home/section_header_bg.jpg) to extend beyond the 960px constraint while still overlaying the main image with the background fill.
HTML:
<div class="container">
<header>
</header>
</div>
CSS:
header {
background-image:
url(page_home/section_header.jpg),
url(page_home/section_header_bg.jpg);
background-repeat: no-repeat, repeat-x;
background-position: center, left;
min-height:200px;
}