full height background image between body and div

[alex1x]

Hi,
So I’m playing around with Codecademy’s jquery stuff, and so far I have this. However, I came across a problem — I wanted to have my background image inside the class jumbotron class, however when I did that the image did not cover my whole page.
So I moved the bg img and background-size: cover to the body, so that’s kind of taken care of… however, when I pull the menu open, the background gets messed up towards the bottom of the screen. I could fix that by pulling both the jumbotron and the body backgrounds with my jquery, but there must be a more elegant solution than basically loading the background twice and doing everything twice with it.

I tried to remove all backgrounds from jumbotron, but when I did that, it just replaced my body background with white, which I don’t want either… Can somebody suggest a fix?

http://alex1x.github.io/jquery-test/

body {
    left: 0;
    margin: 0;
    position: relative;
    background-image: url('http://www.pulsarmedia.eu/data/media/3/Clean%20Windows%208%20Pulsarmedia%20Wallpaper.jpg');
    -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
    height: 100%;
}


.jumbotron {
    background-image: url('http://www.pulsarmedia.eu/data/media/3/Clean%20Windows%208%20Pulsarmedia%20Wallpaper.jpg');
    -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
    min-height: 100%;
}

[Shikkediel]

it just replaced my body background with white

This is in the Bootstrap CSS, on line 5 it specifies the background for .jumbotron as well so it will fall back on that.

when I did that the image did not cover my whole page

You could change the height of .jumbotron to 100vh.

[alex1x]

Thanks!
100vh still not right: http://s17.postimg.org/k422o8pxr/Capture.png

So, is there any way of removing the attribute specified from line 5 in bootstrap without basically saving an edited local copy of bootstrap?

EDIT: nvm, background-color: transparent; on my local sheet fixed it!

[Shikkediel]

Yep, that’s a good solution too. The screenshot’s a bit of a curious situation, 100vh only works well when there’s no horizontal scrollbar. Looks like it switches to cover in the other direction under these circumstances.

[Author]

Posts