add one more div around ur footer div
<div id="footer">---- content goes here ---- </div>
use ur #footer style to #footerwrapper (no need to use background-repeat)
and use below style for ur #footer
background: same as footerwrapper;
height: same as footerwrapper;
margin: 0 auto;
width: same as ur content or any det u like, but u got to give it if u r giving width in ur content or anywhere in ur layout or use 960px which is ur container_12 is to check;
use background positioning center/middle, if u r using image as background, in both divs...
but here is a catch, u will be restricted with dis method as ur footer will be placed inside some width...
so if u want ur footer starts from one end to another end in any size browser is resized... u r outta luck in det case i have been looking for det solution for some last 5 or so years n sill outta luck
width: 100% wont work in any container block if ur using width in px in any one container block in ur layout (i belive ur clear what i mean by container block)
for clear just remove background images from ur header n u will c ur nav bar is not also 100% wide...