cssbackground-imagebackground-size

Refactoring background properties into one line makes image disappear

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

  • 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).