Full background image, ignoring the sites structure? - css

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

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.

Answer 3

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