Image in the middle between header and footer - CSS - html

Question

I want to built a simple landing page with a header,footer and an image - exactly between the header and the footer (horizontally/vertically centered).
The space between the header/footer and the image should be the same and should depend from the height of the browser-window.
The image has a fixed width (900px) and a fixed hight (600px).
Aw: it is a sticky footer
I have tried something like this:
{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}
my html:
<div class="fbg">
<div class="fbg_resize">
<img src="images/image.png" width="900" alt="" />
</div>
<!--<div class="clr"></div>-->
to get it horizontally centered:
.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}
here is the code that matters:
http://jsfiddle.net/SFWBL/

Answer 1

Have a look at this fiddle for the basic premise, it should be enough to get you started.
HTML
<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>
CSS
html, body{
text-align:center;
height:100%;
width:100%;
margin:0;
padding:0;
}
#header, #footer{
height:50px;
width:100%;
}
#image{
height:50px;
width:50px;
margin:-25px auto 0 -25px;
background:grey;
position:absolute;
top:50%;
left:50%;
}
#header{
background:blue;
}
#footer{
position:absolute;
bottom:0px;
background:red;
}

Answer 2

Instead of using an img, you can try background-image for the div
html, body {
height: 100%;
}
.fbg {
background-image: url(http://lorempixel.com/900/600);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
See modified JSFiddle

Answer 3

Relative (percentage) positions are the way to get your elements to recognize the size of the browser window. Since they work on the edges (top, left), you have to use a negative margin to move the item back up half the height of your item. Since you know the fixed height of your image is 600px, you need -300px. You want to give your image:
position: absolute;
top: 50%:
margin-top: -300px;