Full Screen Background Image Is Stretched

Question

I had made a full screen background image for one of my clients, but the problem is that when I make the image to fit all the screen using the following css codes:

#bg-image img{
position:fixed;
left:0;
top:0;
width:100%;
max-height: 100%;
}
#bg-image{
height: 100%;
width: 100%;
float: left;
overflow: hidden;
position: relative;
}

Everything works perfect, as the image is filling all the background of my home page, but the problem is that now the background image seems to be stretched, and I would like to know how to make my image is size or ratio to be correct in order to fit the whole screen size without getting stretched (with full quality), so that the background image is quality to be perfect.

So, how to make my image to fit perfectly on the background of my home page.

Any Help Would Be Very much Appreciated!

Answer 1

You should really look into the background size property instead of using fixed images. Using 'cover' for background-size, means that the image should grow or shrink just enough to cover the whole background.

If you know the dimensions of the image. You can use a media query to change the background-size to 'auto' when it would otherwise grow beyond it's original size.

html, body {
    min-height: 100%;
}
body {
    background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
}
@media (min-width: 1120px), (min-height: 630px) {
    body { background-size: auto; }
}