roughly your html will go like this:
HTML Code:
<body>
<div id="wrapper">
<div id="content">
YOUR CONTENT GOES HERE
</div>
</div>
<div id="footer">
YOUR FOOTER IN THIS CASE THE IMAGE
</div>
</body>
and your css will go like this:
Code:
#wrapper {
min-height: 100%;
height: auto !important; /* don't remove this line. it's hack for IE min-height */
height: 100%; /* don't remove this line. it's hack for IE min-height */
margin-bottom: -100px; /* length of your footer */
}
#content {
padding-bottom: 200px; /* footer's height + gap after content */
}
#footer {
position: relative; /* must have this in order to assign z-index */
z-index: 1;
height: 100px;
background: url(image.jpg) center no-repeat;
}