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: https://i.sstatic.net/e5bhb.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.

Possible duplicate of CSS background image to fit width, height should auto-scale in proportion — Alex Angas
– Alex Angas, Commented Mar 1, 2016 at 0:57

Fas M · Accepted Answer · 2014-11-07 22:18:42Z

7

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

            }

answered Nov 7, 2014 at 22:18

Fas M

4272 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sandyapplebum · Accepted Answer · 2014-11-07 22:22:46Z

2

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

answered Nov 7, 2014 at 22:22

sandyapplebum

886 bronze badges

Collectives™ on Stack Overflow

HTML/CSS - Make background fit any window size

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related