CODEWITHSUNDEEP
cssreactjsbackground-imageredwoodjs
Nick Matthews
Nick Matthews

Reputation: 101

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

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

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

Upvotes: 1

Views: 40

Answers (1)

OfficialVysko
OfficialVysko

Reputation: 142

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;
}

Upvotes: 0

Related Questions