How to position a background image like wanderfly.com?

Hey guys. i want to be able to position my image background similar to www.wanderfly.com . the source of that page shows that they use an hidden input field:

<input value="http://f开发者_StackOverflow中文版arm1.static.flickr.com/32/35826109_27e678ec45_b.jpg" id="backgroundImage" type="hidden"></input>

I tried to look for the CSS implementation of "backgroundImage" but couldn't find it. the image they use however is 1024:685 but they figured how to stretch it for higher resolution, giving that neat fullscreen display.

How would i be able to do the same?

add an img in your html with id="background". In your css write this: #background { width: 100%; position: absolute; top: 0; left: 0; }

Demo: http://jsfiddle.net/XW9Pz/1/

They have an absolutely positioned foreground image.

<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow-x: hidden; overflow-y: hidden; z-index: -9999; ">
    <img style="position: relative; width: 969px; height: 643.4765625px; left: 0px; top: -63.23828125px; " src="http://farm3.static.flickr.com/2146/2428825658_c5f07a8f89_b.jpg">
</div>

If you want to have a fullscreen background image that stretches 100% width and height of a monitor without having it be squished or pinched because the users monitor is a widescreen, try the following code. it worked wonders for me.

CSS:

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0 ;
    z-index: -1;
}

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; 
    }
}

HTML PAGE:

<asp:Image ID="imgBG" runat="server" CssClass="bg" ImageUrl="~/Sites/0/PageLayouts/Images/Background.jpg" />