Background Image width shall overflow, Fix height - html

Question

I want to set height 100% and width overflow to an image, so that on every screen the TOP Menu (Red Buttons) and the Footer Menu can be reached easily.
Left hand side and right hand site can overflow.
I tried
.stretch {
width:100%;
height:auto;
}
Withouth success. And changing values makes the image fullscreen and has not the desired effect.
Any Ideas?
Here's a fiddle: http://jsfiddle.net/H75BT/2/
Edit:
From Bigood's answer, I need this one to be centered : http://jsfiddle.net/H75BT/1/

Answer 1

Apply a 100% height on html & body, and define that your .stretch will adapt its height to the height of the body, and recalculate its width to keep the proportions :
html, body {
margin:0;
padding:0;
height:100%;
overflow-x:hidden; /* Add this to prevent the body to adapt its width if you need */
}
.stretch {
width:auto;
height:100%;
}
Working demo
Edit
You can make it centered by using CSS's background:
.stretch {
background-image: url("http://bockt.de/link/home.jpg");
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;
height: 100%;
position: relative;
background-origin: padding-box;
}
With a <div class="stretch"></div>.
Centered image demo