Set an "odd" image as a responsive full screen background, showing the entire image in React/RedwoodJS

Question

Somewhat odd request here - I need to set an image as a background, for which I would normally use cover, but I need all edges of the image visible at all times (image attached). I've tried all the traditional approaches, but I'm starting to think maybe setting a top level element, absolutely positioned, with another relative "normal" div above it allowing for normal React dev. (My version is .webp, not .svg)

Thoughts? Tried versions of that absolute positioning and of course stuff like you find here: https://css-tricks.com/perfect-full-page-background-image/

"background image, RedwoodJS, React, layout, CSS"

Answer 1

Use viewport units to set the image's height and width.

img {
    height:100vh;
    width:100vw;
}

Edit: if you want to achive this with background-image:

div {
  height:100vh;
  width:100vw;
  background-image: /* IMG */
  background-size:cover;
  background-repeat:none;
}