Почему не работает background: cover?

Question

[akabeerka]

Здравствуйте!

По какой причине может не работать следующий код:

background: #31344e url(../img/intro.jpg) center no-repeat / cover;

и в то же время разделение background и background-size работает

background: url(../img/intro.jpg) center no-repeat;
background-size: cover;

Answer 1

[Lord_Dantes]

https://developer.mozilla.org/ru/docs/Web/CSS/back...

Comments

[akabeerka]

Да, я уже читал про это свойство, в чем собственно ошибка то?

[Сергей delphinpro]

akabeerka, ошибка в синтаксисе.
Формальный синтаксис:

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

т.е. размер задается после позиции через слеш.
А у вас размер задан после репита.

Итого, правильно будет так:

background: #31344e url(../img/intro.jpg) no-repeat center / cover;

[akabeerka]

Сергей delphinpro, спасибо, за объяснение, мне это помогло.
Проблема только в том, что я этот код копировал с урока по верстке и у того человека работал код именно так, как описан в моем первом посте, т.е.

background: #31344e url(../img/intro.jpg) center no-repeat / cover;

[Сергей delphinpro]

akabeerka, Возможно этот браузер менее требовательно соблюдает спецификацию. Вообще браузеры довольно лояльно относятся к ошибкам и пытаются их исправить по мере сил.
Но всё-таки во избежание возможных проблем нужно следовать спецификациям.