Adjusting a footer image so that it's offset by 10pixels?

Question

My webpage has a static header and footer and for my top logo/image the image overhangs by 10pixels which is what I want it to do, but my bottom image overhangs off the end of the screen, I want it to be a minus offset so that the top of the image starts 10 pixels higher than the footer...

If you check the image You can see what it currently looks like (Green = Correct, Red = Incorrect)

If you check the image You can see this is what it is supposed to look like, with the image overhanging on both static bars.

JSFiddle

The part of the css that I have been fiddling with to try and it it working is:

#footer_container {
    background: #262A2D url('gradhead.png') repeat-x;
    border: 0px solid #666;
    bottom: 0;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #ECECEC;
}

#footer .footimage {
}

If I throw in a top: -10px; in the #footer css everything offsets which is isn't quite what I'm looking for it fixes the main image but everything else moves up...

Answer 1

Add this to your CSS declarations:

#footer .footimage {
    position: relative;
    top: -10px;
}

See jsFiddle