CSS Percentage Issues

I have a footer image that displays within a footer div. The footer image is mostly black, so I want a div to the right and left area of the footer to be black and extend to the edge of the page. I'm unable to accomplish this. I would appreciate any help. Below is my css code and then the associated HTML code: CSS:

body{
width: 1196px;
    margin-top: 2px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
}

.footer {
    width:1196px;
    float: left;
    height: 572px;
}

HTML:

 <div class="footer"><img src="images/footer.jpg" width="1196" height="572"/></div>