How can I make a full page background image and not have it stretched (something like this)?
<html>
<style>
html, body {height:100%;}
#background {
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
position:fixed;
top:0;
left:0;
z-index:-1;
}
@media screen and (max-width: 1024px){ #background{left:50%;margin-left:-512px;}}
</style>
</head>
<body>
<img id="background" src="http://www.iwallpapers.in/bulkupload/C/Mountains/Mountains%2040.jpg" alt="" />
</body>
</html>
Pastebin here
EDIT:
The above code might illustrate my goal better. When you re-size the window to let's say 400px you get empty space under the image. I want the image to fill the entire window and keep its aspect ratio.
<!DOCTYPE html>
<html lang="en">
<head><head>
<title></title>
<style>
*{margin:0; padding:0;}
#wrap{
width:100%;
height:auto;
margin:0 auto;
}
#bg{ width:100%}
</style>
</head>
<body>
<div id="wrap">
<img src="http://www.bmwgallery.co.uk/bmw-motorcycles/bmw-s1000rr-superbike-motorcycle-large.jpg" id="bg" />
</div>
</div>
</body>
</html>