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'm trying to figure it out. In W3S , it says the following about structure, but I cannot see what '/' is and how other attributes correspond to 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; 

This is actually a shortened version for:

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

/ valid CSS, see formal syntax in MDN .

Answer 2

Well, if you split it, you will see that it reads the following in order:

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

Answer 3

According to the documentation - cover - special meaning for scaling images:

The value of the cover indicates that the background image should be as small as possible, provided that both dimensions are greater than or equal to the corresponding container size.

Here is their sample script

Answer 4

This means that this background is covered with a white background; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg , it is centered and will stretch in accordance with the width or height, depending on which one the greatest, while maintaining its proportions.