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 from (already accomplished here) and the width should be relatively proportional to the height. As you can see in my page (http://lamininbeauty.co.za), the page has space on the sides. I want the image to center horizontally. Below is my code:

CSS:

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;

}

HTML:

<body>
<div id="main">
    <img class="bg" src="images/massage2.jpg" border="none" />  
</div>
</body>

Note: I do not want the image to lose aspect ratio and it should always fit in vertically 100%, none of the image being cut off and no vertical scrolling. Horizntal centering. I try to stay away from the background-size property since IE8 and lower does not support it.

Remember that there are no fixed widths, so position:absolute; left:50%; top:50%; margin-left:-250px; margin-top:-250px; will not work (example sizes used) — DextrousDave, Jul 16 '12 at 20:22

score 10 · Accepted Answer · edited May 23 '17 at 12:15

10

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%;
}

edited May 23 '17 at 12:15

Community

1
1

answered Jul 16 '12 at 21:04

0b10011

18,397
4
65
86

@DextrousDave, no prob. See the additional solution I added from another answer of mine--I think it might be an even better solution for your needs :) (And don't forget to mark this *accept* this answer.) – 0b10011 Jul 16 '12 at 21:12
As I asked Scot below, if i want to add text over that image, how would I go about that? – DextrousDave Jul 16 '12 at 21:23
Your alternative answer is _sweet_! So good, I upvoted this and the one you linked too. – ScottS Jul 16 '12 at 22:25
@DextrousDave, that is where things begin to get tricky. The `img` element handles size quite a bit differently from normal elements, which allows this absolute center trick to work in the first place. Achieving a similar affect with a different element (in current browsers) requires a static width and height on the wrapper element (or JavaScript). To do this, simply change `img.absoluteCenter` to the correct element and use `height` and `width` instead (these *can* be percentages). Here's [an example](http://jsfiddle.net/nzxPV/6/). – 0b10011 Jul 17 '12 at 01:12

gilly3 · Answer 2 · 2012-07-16T21:15:30.350

1

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/

edited Jul 16 '12 at 21:15

answered Jul 16 '12 at 21:02

gilly3

87,962
25
144
176

thanks a lot. This works just as good. If I wanted to add text on top of the image, how will I go about it? – DextrousDave Jul 16 '12 at 21:26
Put a div containing the text inside the wrapper div and position it absolutely. – gilly3 Jul 16 '12 at 21:27
@DextrousDave - Here's an example of putting text on top of the image: http://jsfiddle.net/Mt7ce/1/. A span works as well as a div: http://jsfiddle.net/Mt7ce/2/ – gilly3 Jul 16 '12 at 21:32
thank you! Really nice code. I would have given you the points, but bfrohs above helped me first and he gave me multiple answers. But thanks again – DextrousDave Jul 17 '12 at 07:13

ScottS · Answer 3 · 2012-07-16T22:19:27.057

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.

thanks man! this works great. One more question though, what if I want to add text over that image(say in a span tag), without disturbing the current layout? — DextrousDave, Jul 16 '12 at 21:16
@DextrousDave--added text overlay, though see my notes down out the bottom in my answer. — ScottS, Jul 16 '12 at 22:20
yeah, thanks. I also think putting the text inside the image is the safest bet — DextrousDave, Jul 17 '12 at 06:45

score 0 · Answer 4 · answered Jul 16 '12 at 21:00

0

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.

answered Jul 16 '12 at 21:00

Huangism

16,278
7
48
74

ok cool, thanks. I will see if there is anything else I can do, last resort I'll use jquery...but I don't want to fix the width for now. Thanks for your help – DextrousDave Jul 16 '12 at 21:03
or else what I can do is, use media queries and set the height and width for each representative screen size... – DextrousDave Jul 16 '12 at 21:04

Positioning image horizontally center and make height 100% of viewport

4 Answers4

Alternative Solution

Linked

Related