Background not covering whole display screen? - html

Question

I am having trouble with my background covering the whole page vertically, as it is only halfway now. This is what I am currently doing, and I am not sure why it is not working.
<div class="bg">
<div class="container">
some more code here
</div>
</div>
And in my CSS I have:
body, html {
height: 100%;
}
.bg {
background-image:url(myimage.png);
background-height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I have also tried a few solutions from previous posts on here to no avail.
Thank you for your time.

Answer 1

Your bg class will need a height value, otherwise it will only be as tall as the content that fills it.
Also, background-height is not a valid property.
body, html {
height: 100%;
}
.bg {
height: 100%;
background-image:url(http://www.fillmurray.com/800/400);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Change the image to your image and you should be good. See the attached fiddle.
https://fiddle.jshell.net/krqvhymn/
Your can also give your container class a height value. Depends on what you are looking to do

Answer 2

Unfortunately I can't comment, so I'm offering this answer as further help (although it doesn't answer your question):
You can take those background properties and use shorthand to place them all into one line, instead of separates. That would look like:
.bg {
height: 100%;
background: url(myimage.png) no repeat cover center;
}