Как использовать линейный градиент на фоне сокращенного правила?

Question

Почему я получаю различный результат с этим:

body { 
    background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0, 30px 30px/60px 60px #eee; 
} 

при попытке получить результат я получаю с этим:

body { 
    width: 100px; 
    height: 100px; 
    background-color: #eee; 
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); 
    background-size: 60px 60px; 
    background-position:0 0, 30px 30px; 
} 

?

codepen

Answer 1

Короткая рука для этого было бы:

body { 
 
    background: 
 
    0 0/60px 60px linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
 
    30px 30px/60px 60px linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) #eee; 
 
}

Вам необходимо установить положение и размер для каждого фонового изображения

Answer 2

Вы только что синтаксис немного неправильно здесь:

background: linear-gradient(45deg, black 25%, transparent 25%, 
       transparent 75%, black 75%, black), 
      linear-gradient(45deg, black 25%, transparent 25%, 
       transparent 75%, black 75%, black) 0 0, 30px 30px/60px 60px #eee; 
                ^^^ 

что запятая здесь не так - он должен закончить

   transparent 75%, black 75%, black) 0 0 30px 30px/60px 60px #eee;