I'm trying to cleanup my CSS for the background property. When I list each property individually, everything works as intended. However, when I try to refactor this into one line, the image disappears. I believe it has something to do with the background-size property but I have not been able to figure it out in a refactored solution. Any help would be greatly appreciated!
Working Code
.bg {
content: "";
height: 100vh;
background-image: url("../../assets/mountain.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
opacity: 0.9;
}
Attempted Refactor
.bg {
content: "";
height: 100vh;
background: url("../../assets/mountain.jpg") center cover no-repeat;
position: relative;
opacity: 0.9;
}
This should work:
background: url("../../assets/mountain.jpg") no-repeat center / cover;
background-size needs to be preceeded by a "/" character (and I think it needs to go at the end).