4

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.stack.imgur.com/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.

aliazik
  • 195
  • 1
  • 5
  • 13
  • Possible duplicate of [CSS background image to fit width, height should auto-scale in proportion](http://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion) – Alex Angas Mar 01 '16 at 00:57

2 Answers2

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

            }
Fas M
  • 429
  • 2
  • 11
2

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

sandyapplebum
  • 88
  • 6