Background image shows when set to cover, but not when set to contain?

user_15319021 0
Viewed 34

I am building a react app, and I am writing responsive sass code to make my site look nice. I am trying to make my background image scale, and I am trying to use the background-size: contain; property to do so.

I'm running into a bug I can't fix though... When the background size is set to "cover", the image shows no problem. When I change that property to "contain", the image doesn't show anymore. The image is being loaded according to the console, and I can see it in the inspector as a style on the body where I have it attached. What gives? Why won't the image show? Here's the relevant css.


body {
  min-height: 100vh;
  height: auto;
  width: 100vw;
  max-width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto;
  background: center / contain no-repeat url("../img/boulder.jpg");
}
css html
1 Answers
Admin1
Related