You want to place the footer in relation to... what? I guess "at the absolute bottom of <div id="wrapper">"? Then you need to make your wrapper either position: relative; or position: absolute;. Absolutely positioned elements orient themselves on the closest parent that has a relative, fixed or absolute position. From your CSS that would seem to be the nothing but the <html> or <body>.
Also, both your info-footer and footer elements would be positioned at the very bottom layered on top of each other. Is that the desired effect?
Maybe you could post a mockup of what you want it to look like, and what it looks like now?
Is it really necessary to do it this way, instead of just having the content push the footer down "naturally"?
EDIT: Not sure if I understood it correctly, but what about simply repeating the background image along the bottom of <body>?
body { background: url(image.jpg) repeat-x center bottom; }