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:

<divid="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>

Solution 3:

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:ImageID="imgBG"runat="server"CssClass="bg"ImageUrl="~/Sites/0/PageLayouts/Images/Background.jpg" />