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