Почему фоновый размер не работает?

Question

У меня возникли проблемы с получением background-size: cover; работать из моего файла CSS при указании рядных фонового изображения с помощью style="" тега:

CSS

header.hero { 
    position: relative; 
    clear: both; 
    overflow: hidden; 
    min-height: 390px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    background: #cccccc; 
} 

HTML

<header class="hero" style="background-image: url('hero.jpeg');"></header> 

Если добавить !important в background-size: cover; , он работает правильно. Почему я не могу заставить это работать без !important?

Answer 1

Попробуйте изменить background: #cccccc; на background-color: #cccccc;.

Поскольку background - это правило сокращения, оно отменяет некоторые значения, установленные вами ранее.

Начальное значение, так как каждый из свойств стенографии:

background-image: none 
background-position: 0% 0% 
background-size: auto auto 
background-repeat: repeat 
background-origin: padding-box 
background-clip: border-box 
background-attachment: scroll 
background-color: transparent 

Answer 2

Вы overwritting все стили фона с background: #cccccc;, потому что вы не specifiyng атрибут фона, так что вы должны изменить его

background-color: #cccccc;

этим способом цвет фона будет работать как атрибут цвета и не будут перезаписаны другие атрибуты