What does this line mean in CSS?

Question

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;

Answer 1

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.

Answer 2

Well if you split it up, you'll see that it's reading the following in order:

background-color | background-image | background-repeat | background-position | background-size

Answer 3

According to the documentation - cover is a special value for scaling images:

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.

Here's their sample fiddle

Answer 4

It means a white background is covered by this image; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg, it is centrally aligned and will stretch to fit the width or height, whichever is largest, whilst mainting its proportions.