Search code examples
cssbackgroundbackground-imageviewportviewport-units

Background cover image on 100vh - screen differences


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>


Solution

  • A fast workaround to all desktop devices will be to set

    background-position: bottom right;