80

I have an image called myImage.jpg. This is my CSS:

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

For some reason, when I do this, the width of myImage stretches across the entire screen but the height only stretches until the height of everything else on the page. So if I put a bunch of 

<br>

in my html page, then the height will increase. If my HTML page consists only of a 

<div id='header'>
    <br>
</div>

then the height of the background image would just be the height of one

<br>

How do I make the height of my background image 100% of the screen which the user is using to view the webpage?

SilentDev
  • 17,837
  • 28
  • 98
  • 196

4 Answers4

155

You need to set the height of html to 100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

SomeKittens
  • 37,637
  • 19
  • 110
  • 141
66

I would recommend background-size: cover; if you don't want your background to lose its proportions: JS Fiddle

html { 
  background: url(image/path) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Source: http://css-tricks.com/perfect-full-page-background-image/

Derek Story
  • 9,228
  • 1
  • 21
  • 34
5
html, body {
    min-height: 100%;
}

Will do the trick.

By default, even html and body are only as big as the content they hold, but never more than the width/height of the windows. This can often lead to quite strange results.

You might also want to read http://css-tricks.com/perfect-full-page-background-image/

There are some great ways do achieve a very good and scalable full background image.

Kjeld Schmidt
  • 713
  • 8
  • 19
5

The VH unit can be used to fill the background of the viewport, aka the browser window.

(height:100vh;)

html{
    height:100%;
    }
.body {
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100vh;     
}
Mostafa Norzade
  • 1,408
  • 4
  • 22
  • 39
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – A. Suliman Aug 12 '18 at 05:54