“cover” property bugging the background

I am having a problem with covering the background in CSS.

Before:

.main-bg {
  background: no-repeat url("../../images/main_bg.jpeg");
  height: 100vh;
  color: white;
}

Image Before

After:

.main-bg {
  background: no-repeat url("../../images/main_bg.jpeg") cover;
  height: 100vh;
  color: white;
}

Image After

Anyone know how to fix this? Thanks!

Answer

You cannot have cover alone in the background property. You are obliged to define the position as well:

background: no-repeat url("../../images/main_bg.jpeg") center/cover;

Or add background-size: cover

Related: Error: CSS: background: / is an incorrect operator