Kevin Powell - Community•7mo ago

Background image is not full height with dialog element

Hello, without using background-attachment: fixed, I would like the image on this page (https://wisio.io/test) to always fill the height of the viewport, especially on mobile view. Perhaps this is not possible, but any suggestions would be appreciated. Thanks.

1 Reply

MarkBoots•7mo ago

make it a separate element, full height and width fixed to the viewport and set the background to cover

<body>
  <div class="background"></div>
  ....
</body>

<body>
  <div class="background"></div>
  ....
</body>

.background{
  position: fixed;
  inset: 0; 
  background-image: url("...");
  background-size: cover;
}

.background{
  position: fixed;
  inset: 0; 
  background-image: url("...");
  background-size: cover;
}

Gaming

Programming

Background image is not full height with dialog element