"cover" property bugging the background

Question

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

After:

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

Anyone know how to fix this? Thanks!

Try `background: url("../../images/main_bg.jpeg"); background-size: cover;`. — Dean James, Sep 25 '22 at 21:05

score 0 · Accepted Answer · answered Sep 25 '22 at 21:15

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

1 Answers1