Image height to adjust to screen height

Question

So I have an image background, and I want it to fill the height of the screen depending on the screen size, laptop, ipad, phone, etc.

I want the height to adjust to the screen height.

.mobile-cover {
    background: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/08/Modern-wallpaper-10.jpg) center top;
    background-position-x: 50%;
    border: red 0px solid;
    width: 100%;
    visibility: visible;
    height: 600px;
}

https://jsfiddle.net/tz2erwch/

Answer 1

Nevermind! I've answered my own question!

For anyone else who is interested I simply used

height: 100vh;

where one 1vh is equal to 1% of the viewport's height.

I changed to 80vh as 20% of the screen is taken by nav. This worked well.