HTML/CSS - Make background fit any window size

Question

I need help to make my background fit properly. I want the whole image to show and be stretched if i use full-screen window.

The image is smaller than my monitor, so when I try to stretch it, it only zooms-in. I'll show you the image.

Image can be seen here: http://i.imgur.com/DDsTag7.jpg

My code so far (CSS):

body {
   background-image:url(Ranger_with_Tusks_of_Killed_Elephant.jpg);
   background-size:100%;
   background-repeat:no-repeat;
   height: 100%;
   width: 100%;
}

It completely ruins the background image on my size of screen: 1920x1080

How can I make it show the WHOLE image no matter what size? Only using CSS preferably.

My code works great AS LONG AS the window size doesn't exceed the width/height of the image. Try my code and see for yourself, it doesn't show the full image. It's like it zooms-in.

Solution 1

just use code below

html{
                background: url(Ranger_with_Tusks_of_Killed_Elephant.jpg) no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover; 
                background-size: 100% 100%;

            }

Solution 2

I think what you are looking for for is background-size: cover;

Comments

[Alex Angas]

Possible duplicate of CSS background image to fit width, height should auto-scale in proportion