Positioning image horizontally center and make height 100% of viewport

Question

I have a an image taking up the entire height of the viewport. The image height should span the entire viewport height (100%) so that it will fit to the screen it is viewed

Answer 1

Well I don't know if you can set the main height or not, but if you can set the height then

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    text-align: center;
    height: 300px;
}

img.bg {
        /* Set rules to fill background */
        max-height: 100%;

        /* Set up proportionate scaling */
        height: auto;       
}

I only tested this on FF. For the height of main, you can always set it to the viewport with jquery. I was not able to come up with what you wanted without setting that height.