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'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; 
+5
source share
4 answers

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 .

+10
source

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

+4
source

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

+3
source

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.

+2
source

Source: https://habr.com/ru/post/1259052/


All Articles