Footer's background image jumps to top of screen, but footer content remains at the bottom

Footer's background image jumps to top of screen, but footer content
remains at the bottom

I've made a footer for my client's tattoo portfolio site:
http://jessetattoo.com/testing - it's contents (copyright and social media
links) remain at the bottom where they are supposed to, but the background
image sticks to the top of the page (the red bar).
This is my css:
#footer{
width: 100%;
height:40px;
background:url(../images/footer-bg.jpg) repeat-x;
bottom:0;
position:relative;
margin-left:-10px;
margin-right:-15px;
}
I've also tried:
#footer{
min-width: 100%;
max-width: 100%;
height:40px;
background:url(../images/footer-bg.jpg) repeat-x;
bottom:0;
position:fixed;
margin-left:-10px;
margin-right:-15px;
}
Setting the position to fixed worked but I want the footer to scroll, not
be sticky. Having a sticky footer would be fine, but when viewed on a
mobile device the footer does not stay fixed, instead it just gets cut off
when the user pinch-zooms in to read content (it's not a responsive site
unfortunately).
Any help is appreciated! Thanks in advance!