Firefox и Chrome игнорируют размер фона?

Question

У меня есть несколько медиа-запросов на моем сайте, которые изменяют размер элементов на пэдах/смартфонах. Я только что добавил другой медиа-запрос, чтобы изменить размеры тех же элементов на ноутбуках с более низким разрешением и обнаружил, что Firefox и Chrome, похоже, игнорируют мое использование фонового размера.

Запрос на мультимедиа работает, часть из них подбирается, но не размер фона. Он отлично работает в сафари.

Любые идеи, почему?

Мой CSS является:

@media only screen and (min-height: 768px) and (max-height: 800px) { 
    #title-we-are { 
     background-size:95%; 
     background: url(../img/title_we_are.png) bottom center no-repeat; 
     height:254px; 
    } 
} 

Answer 1

Ваш background-size помещается перед вашим background стенографии, так the shorthand overrides it with its default value (auto), предотвращая предыдущую background-size декларацию от принятия любой эффект. Это common gotcha с использованием сокращенных свойств.

Если это работает в Safari, скорее всего, Safari не обновила свою стенографию background, чтобы узнать значения background-size, что позволяет работать background-size.

Вам необходимо включить их вокруг так, ваше установленное значение background-size может вступить в силу:

@media only screen and (min-height: 768px) and (max-height: 800px) { 
    #title-we-are { 
     background: url(../img/title_we_are.png) bottom center no-repeat; 
     background-size:95%; 
     height:254px; 
    } 
} 

Answer 2

.. потому что они имеют другой формат CSS:

-webkit-background-size: cover; //safari chrome 
-moz-background-size: cover; // firefox 
-o-background-size: cover; // opera 

Answer 3

Дополнительная информация: я решил, что с помощью «фонового изображения: URL()» в хроме, фон-размер делает не работа.

Только при использовании «background: url()» стенография делает фоновый размер любого эффекта.

Это верно, как из Chrome 56.0.2924.87 (64-бит)