Wordpress footer has body background image overlapping

Question

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 image).

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;
}

score 0 · Answer 1 · answered Sep 26 '11 at 14:38

0

You have the following selector:

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

that should be:

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

answered Sep 26 '11 at 14:38

inigomedina

1,791
14
21

that moves the text up, still leaves me with a Grey box on the bottom of the footer. – 3Cdesign Sep 26 '11 at 14:44

score 0 · Accepted Answer · edited Sep 26 '11 at 15:36

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.

score 0 · Answer 3 · answered Sep 26 '11 at 14:57

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.

Wordpress footer has body background image overlapping

3 Answers3