Cannot set background to fill the window


#1



https://www.codecademy.com/courses/web-beginner-en-zmn0b/0/5?content_from=make-an-interactive-website%3Ayour-first-program


I'm trying to work outside of the codeacademy IDE, and copied code to the Atom, fixed all links to the libraries, everything is set. But the issue is that .jumbotron {height: 100%; } is not working on my side, the background image is not filling all window, but instead is stuck on the header level. I tried to debug it, but still couldn't.



Replace this line with your code.


#2

UPDATE: Made temporary fix.
Removed height:100% property in the jumbotron class, and instead set padding-bottom:100%;
Doesn't work well: because when I make screen smaller, then it gets smaller too.

UPDATE2: Made padding-bottom: 1000px, works better, but still not sure that it would be a good solution.


#3

Your CSS should look something like this...

.jumbotron {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png'); 
  height: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

I don't recall having to do anything with the style sheet for this module. The author provided it with the course.


#4

Exactly, my css was looking like this, if I don't change anything to it, then it doesn't fill the background outside of the codeacademy.
Inside of the codeacademy IDE it looks and works fine.


#5

If you are working on your own system, remember that HTTP resolves to file://. or 127.0.0.1. Be sure to write http:// in your URL's.


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.