Search code examples
csssyntaxbackgroundbackground-size

What does this line mean in CSS?

What does this line mean in CSS ?

#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center / cover

I am trying to figure it out. In W3S it says the following about the structure but I can't seem to see what the '/' and how do other attributes match this structure.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Solution

  • This line

    background: #ffffff url(...) no-repeat center center / cover;

    Actually is the shorthand version for:

    background-color: #ffffff;
background-image: url(...);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

    The / is valid CSS, see the formal syntax on MDN.