"cover" property bugging the background

Asked 2 months ago
Viewed 10 times

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


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

Image Before


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

Image After

Anyone know how to fix this? Thanks!

asked 2 months ago

Correct 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

answered 2 months ago