Javascript isn't changing HTML background image

Question

I'm trying to make a "click to enter" page using Javascript, and I have a preexisting home page that I built with HTML. When the user goes to the home page, I want to hide the content of the home page (inside a div called 'content'), and display the content of another div. I have to problem hiding showing the div, but the issue is that I can't change the background.

Since, in my css file, I've added a background image styled under html, when I do document.querySelector('html').style.backgroundColor = 'black'; though, it isn't changing anything. In my console it's showing

element.style {
    background-color: black;
}

instead of styling the html{}. But in my console, when I uncheck the box setting the background image (basically unstyle) it gives me the black background I want. Can anyone help me overwrite the styling? Specific code below:

styles.css

html { 
    background: url("Testbg.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
    z-index: -1;
}

javascript file

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#content').style.display = 'none';
    document.querySelector('html').style.backgroundColor = 'black';
});

What's showing up in the console

element.style {
    background-color: black;
}

html {
    background: url(Testbg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
    z-index: -1;
}

Any help would be much appreciated!

Answer 1

it should be background only, not backgroundColor it's two different property. background-color can be only set to a color.

document.querySelector('html').style.background = 'black';