Wordpress footer has body background image overlapping

On http://www.teampaulmitchellkarate.com/ the footer where "this website is created by" should continue all the way down and not cut off half Grey(its showing part of my background imag开发者_C百科e).

I've made the BG image smaller but then it cuts off in the middle of the page on the home page.

CSS for footer:

#footer {
    background: url("images/footer.gif") repeat-x scroll 50% 0 transparent;
    height: auto !important;
    min-height: 171px;
    overflow: hidden;
}

---

If you want the white bg of the footer to continue to the bottom of the page, set the background image to repeat along the x and y axis:

#footer {
background: url(images/footer.gif) repeat-x 50% 0%;
min-height: 171px;
height: auto !important;
height: 171px;
overflow: hidden;

}

#footer .indent {
    padding: 23px 0 20px 13px;
}

#footer p {
    line-height: 22px;
    font-size: 14px;
    color: #3f3f3f;
}

    #footer p a {
        text-decoration: none;
        color: #333333;
    }

        #footer p a:hover {
            text-decoration: underline;
        }

    #footer p span a {
        color: #000000;
    }

/* Footer navigation */

nav.footer {
    float:right;
}

    nav.footer ul {
        margin: 0;
        list-style: none;
        overflow: hidden;
    }

        nav.footer ul li {
            float: left;
            padding: 0 0 0 15px;
            line-height: 22px;
            font-size: 14px;
            color: #3f3f3f;
        }

            nav.footer ul li a {
                text-decoration: none;
                color: #3f3f3f;
            }

                nav.footer ul li a:hover {
                    text-decoration: underline;
                }

This will get the white bg slice of the footer to fill the entire area.

Unrelated, you could trim your images/bg.png down to about 10px in width and save some server bandwidth without losing any quality.

---

You have the following selector:

#footer .indent {padding:73px 0 20px 13px;}

that should be:

#footer .indent {padding:23px 0 20px 13px;}

---

Was the height set on your footer set intentionally? You can cut down on the height of your footer and just hide all that empty space quite easily, just set your height on your footer to something like 84px instead of auto and all that empty space will disappear.