Фон размера не работает

Question

Вот мой CSS:

.banner-text-BG { 
    background: #00A7E1 url(images/sale_tag.png) left center no-repeat !important; 
    background-size: 20px 20px; 
    height: auto; 
    padding: 15px; 
    position: static; 
    width: auto; 
    -webkit-border-radius: 70px 10px 10px 70px; 
    -moz-border-radius: 70px 10px 10px 70px; 
    border-radius: 70px 10px 10px 70px;  
    padding-left: 70px; 
} 

В отличие от всех других стилей, «фонового размера: 20px;» не влияет на мою страницу, не отображается в Firebug, а в качестве ботфина не выделяется как допустимая инструкция CSS в Notepad ++. То же самое с «background-size: 20px;» или "background-size: 20px auto;"

Я что-то упустил? Почему это не работает?

Answer 1

В качестве background-size docs состояния:

Если значение этого свойства не установлено в качестве фона обсчитывать свойства, которое применяется к элементу после свойства фона размера CSS , значение этого свойства затем возвращается в исходное значение по сокращенному свойству.

Другими словами, если вы используете свойство стенографии, но не включаете правило размера фона в качестве части его, отдельный размер фона по существу сбрасывается и игнорируется.

Так, чтобы обойти, что вам просто нужно свернуть его в фоновом режиме стенографии вы уже используете, добавив слеш после фона позиции и в том числе размер:

background: #00A7E1 url(http://placekitten.com/200/200) left center/20px 20px no-repeat !important; 

jsFiddle example

Answer 2

Ваше использование !important в фоновом режиме сокращает использование объекта background-size от применения, по крайней мере, в Chrome.

Извлечение !important позволяет изменять размер фона. Смотрите jsfiddle: http://jsfiddle.net/QVXsj/9/

Answer 3

«Важно» следует избегать.

Я бы разделить все атрибуты фона, как, например:

.banner-text-BG { 
    background-image: url(images/sale_tag.png) 
    background-position: left center; 
    background-color: #00A7E1; 
    background-repeat: no-repeat; 
    background-size: 20px 20px; 
}