What is the use of / in the following css statement

Question

I want to know the use of '/' in the following css statement:-

background: url(a.jpg) center bottom / cover no-repeat;

Answer 1

It is used to separate background-position and background-size value. Check the formal syntax of the background property:

background = 
  [ <bg-layer># , ]? <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <box>                           ||
  <box>                           

This allows you to use length-percentage values for both entities, e.g.:

background: 4% / 2%;

is equivalent to:

background-position: 4%;
background-size: 2%;

The CSS shorthand rule from the question:

background: url(a.jpg) center bottom / cover no-repeat;

is equivalent to

background-image: url(a.jpg);
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;