Semi-Sticky footer behind content

Question

I'm trying to create a sticky footer from an image of 360px height, but I like that 160px of image to be behind the content and 200px to remain sticky. My css is:

html {
 position: relative;
 min-height: 100%;
}

body {
 margin: 0 0 360px;
 background: #049ec4
}

#wrap {
 width: 90%;
 border-radius: 8px;
 background: #809FFF
}

footer {
 position: absolute;
 left: 0;
 bottom: 0;
 height: 360px;
 width: 100%;
 background: #049ec4 url("http://phonegap.com/css/images/cloud.jpg") 0 50% repeat-x;
}

http://jsfiddle.net/RC3Za

but is creating a unwanted space, I like css to output like this:

Answer 1

You can change the footer position to relative and instead of using the bottom property, set the top property to -250px or whatever you want. Set the z-index property to -1 to get it behind the wrap.

Take a look here: http://jsbin.com/picazedu/1/edit

EDIT: A better solution, to avoid the footer being displayed in the middle of the window, is applying the background image to the body and adjusting it with the background-position:bottom left property. Now you can give the footer the height you want to fit the background image where you want: http://jsfiddle.net/YQMyc/4/