Need a black filler bar spanning the width of my website on bottom and top, and must be expandable

Hey everyone. I am trying to create a black bar, the size of the footer to extend from one side of a page to another (pretty much to fill in the white space and make it look like my footer extends to each side of the screen. I cannot do this because I have already used an image in the body section of my CSS

body {
  margin: -1px 0 0 0;
  padding:0px;
  background-color:#FFF;
  font-f开发者_运维技巧amily: calibri;
  background-image:url(images/item9HeaderSideFiller.gif);
  background-repeat: repeat-x;
}

*I'm pretty much doing the same thing with the header, but the black line is much smaller.

Please check out the site http://item9andthemadhatters.com/

This will make it easier to understand what I am trying to do.

I know this is probably an easy fix, but I'm new with html. Any help would be great. Thanks!

UPDATED. Move the #footer outside the #wrap, and add another div for the background.

<div id="wrap">
    ...
</div>
<div id="footer-wrap">
    <div id="footer">
        ...
    </div>
</div>

CSS:

#footer-wrap { background:#000; }
#footer { width:954px; margin:auto; }

#footer-wrap would get the background styles.