So i try to set image on cover with 100vh - but i have very specific situation.
On my image i have big plate and tablet that "lie down" on this plate.
My goal is to make this image 100vh header but there is a problem - when i try test this on my big monitor it looks ok, but on monitor with smaller height it's look bad -i need this tablet to be 100% visible in all desktop devices.
Check my fiddle with "Full page" option to see what i'm about.
I also try to make this image cover without tablet, and then try to place another image with tablet and position:absolute
, but my second image isn't always in exact same place to feet this plate insade frame.
Is it possible to achieve what i desire ?
.cover {
position: relative;
height: calc(100vh - 80px);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
background-image: url(https://s4.postimg.org/uwxudv17x/cover.png);
}
<body>
<div class="cover">
</div>
</body>
A fast workaround to all desktop devices will be to set
background-position: bottom right;