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.

Answer 2

I'm assuming your main is going to contain other items, so with a second wrapper div:

<div id="main">
    <div class="bg">
        <img src="http://lamininbeauty.co.za/images/massage2.jpg" border="none" />
        <span>Some text.</br>And Some More.</span>
    </div>  
</div>

You can set this css:

body {
    overflow: hidden;
}

.bg{
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
}

.bg img {
    max-height: 100%;
    height: auto;
}

.bg span {
    display: block;
    position: absolute;
    width: 100%;
    font-size: 20px; /* sizing this to the dynamic height of img will be a challenge */
    top: 20%;
}

And get what you want (with text now) as shown here. As noted, adding the text, the biggest challenge you are going to face is sizing that text. You will probably need to use javascript or an @media set to change text sizing with height. Personally, unless the text is vital (which I would think if this is background, it is not), I'd put the text in the image so that it scales with the size and stays right in relation to the image.

Answer 3

Put the img in a div and set text-align: center. Make the div fixed, not the img. To stretch smaller images, use height: 100% instead of max-height.

div.bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}
div.bg img {
    height: 100%;
}​

Working demo: http://jsfiddle.net/Mt7ce/

Answer 4

Simply add left:0;right:0;margin:0 auto; to img.bg (example):

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

#main{
    margin: auto;
}

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

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

    /* Set up positioning */
    position: fixed;

    /* Align horizontally */
    left:0;
    right:0;
    margin:0 auto;   
}

Alternative Solution

If you want the image to never be cut off (horizontally or vertically), and always centered, try this code instead (from https://stackoverflow.com/a/6284195/526741):

<img class="absoluteCenter" src="PATHTOIMAGE">

/* Don't Change - Positioning */
.absoluteCenter {
 margin:auto;
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

/* Sizing */
img.absoluteCenter {
 max-height:100%;
 max-width:100%;
}

• Wide image
• Tall image
• Small image