CODEWITHSUNDEEP
htmlcssimageheightscreen
John107
John107

Reputation: 2287

Image height to adjust to screen height

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/

Upvotes: 5

Views: 4066

Answers (2)

Rakesh Chand
Rakesh Chand

Reputation: 3113

Try this:-

background-size: cover;
background-position: center;

Upvotes: 0

John107
John107

Reputation: 2287

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.

Upvotes: 10

Related Questions