Search code examples
cssbackground-image

Full background image, ignoring the sites structure?

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.

Solution

  • 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.