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

CodePudding user response：

I am unsure with that syntax you are using in the background property but this seems to accomplish the desired result: https://codesandbox.io/s/goofy-nobel-tmvno?file=/src/styles.css:67-138

  background-position: contain;
  background: no-repeat center url("../img/boulder.jpg");