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:

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