With over a page of content the footer remains where the bottom of the screen was at top scroll

Good news, I seem to have fixed the code. I cleaned up the code for #colophon. I changed it from this:

#colophon {
    background:url(http://kjel.ca/wp-content/uploads/2014/12/footer-img.jpeg) repeat-x bottom center;
    height:80%;
    width:100%;
    position:absolute;
    margin:0;
    padding:0;
    bottom:0;
    min-width:100%;
    min-height:1%; 
}

To this:

#colophon {
    background: url("http://kjel.ca/wp-content/uploads/2014/12/footer-img-2.jpeg") repeat-x scroll center bottom transparent;
    height: 100%;
    position: absolute;
    width: 100%;
    background-size: 100% 448px;
}

The value that seems to have been the source of the problem was bottom: 0; That put the footer below the content, but there was a right margin. To fix that I added this:

footer[role="contentinfo"] {
    line-height: 2;
    max-width: 100%;
    margin-top: 0;
    padding: 0px 0px;
}

Thanks for your help guys.