Ранее в этом году WebKit обновил поведение свойства CSS-сокращения background
. Благодаря этому изменению свойство сокращенной записи background
сбросит background-size
до значения по умолчанию auto auto
если оно не установлено в объявлении сокращенной записи. Это изменение приводит Chrome и другие браузеры WebKit в соответствие со спецификацией и соответствует поведению Firefox, Opera и Internet Explorer.
Поскольку Chrome для Android переходит к текущим версиям WebKit, это изменение теперь распространяется и на Android. Поскольку это исправление для webkit, сайты, протестированные в нескольких браузерах, скорее всего, не затронуты.
Старый способ ведения дел
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
Сокращенное свойство background
не содержит никакого свойства размера и поэтому сбрасывает background-size
до значения по умолчанию auto auto
.
Правильный способ указания размера изображения
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
В fooB
для указания background-size
в сокращенной записи background
необходимо сначала указать position
(0%), затем косую черту, а затем background-size
(50 пикселей 40 пикселей).
Исправления существующего кода
Есть несколько вариантов, которые помогут легко исправить эту проблему:
- Используйте
background-image
вместо сокращенного свойстваbackground
. - Установите
background-size
в последнюю очередь, с более высокой специфичностью, чем любые другие правила CSS, которые устанавливаютbackground
для этого элемента, и не забудьте проверить правила и:hover
. - Примените свойство
!important
кbackground-size
. - Переместите информацию о размерах в свойство сокращенной записи
background
.
Бонус: смещения фонового изображения
В дополнение к этому изменению теперь появилась большая гибкость в размещении изображения на заднем плане. Раньше вы могли указать положение изображения только относительно верхнего левого угла, теперь вы можете указать смещение от краев контейнера. Например, установка background-position: right 5px bottom 5px;
изображение будет расположено на расстоянии 5 пикселей от правого края и 5 пикселей от нижнего. Посмотрите этот образец на JSBin