Full background image, ignoring the sites structure?

Question

I have got a website that looks like this:

<div id="top" class="header-container2">...</div>
<div class="main-container">...</div>

The first div is the header section and the second the main content area with products and so on. Now I want a full background image and I tried like this:

html {
    background: url(someimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Did not work, no image shown. On the body element it does not work either. Only when I assign the exact same CSS to the main-container div, it works, but the image is not shown as background on the div with id top of course. So, how could I assign the background image without having to think about the structure of the site? Possible at all?

I double checked the path of the image, so thats not the problem.

Answer 1

Set html height to 100vh or 100%

html {
    background: url(someimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
}

These are the default CSS which we set on top of, while writing custom styles like body,html to 100%

And also its good to provide minimal HTML and CSS of your working code.

Answer 2

You can also use the body, I think. Do you use any CSS resets?

body {
    background: url(https://images.pexels.com/photos/1227511/pexels-photo-1227511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
div {background-color:rgba(255,255,255,0.7);margin-bottom:10px;padding:10px;}

<div id="top" class="header-container2">header-container2</div>
<div class="main-container">main-container</div>

To make the page cover the window height, you might try:

html, 
body {
    height: 100%;
}

Answer 3

first, make sure your two divs don't have a background property, otherwise you can simply englobe them in a containing div and assign the background to it.