Background: url('blah, blah') center center cover no-repeat, NOT WORKING

HTML-CSS
#1

CodePen

The problem is the cover. When I put it in the background; the image disappears, BUT when I put it in background-size, it works.

Why?

#2

https://developer.mozilla.org/en-US/docs/Web/CSS/background:

  • The <bg-size> value may only be included immediately after <position> , separated with the ‘/’ character, like this: " center/80% ".

So the correct syntax would be:

background: url('blabla') center center/cover no-repeat;
1 Like