WebKit では今年、CSS background 短縮プロパティの動作を更新しました。この変更により、background 省略形プロパティは、省略形宣言で設定されていない場合、background-size をデフォルト値の auto auto にリセットします。この変更により、Chrome やその他の WebKit ブラウザがこの仕様に準拠し、Firefox、Opera、Internet Explorer の動作と一致するようになります。
Chrome for 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 で background-size を指定するには、最初に position（0%）を指定し、次にスラッシュ、次に background-size（50 px 40 ピクセル）を指定する必要があります。
既存のコードの修正
この問題を簡単に修正できる方法がいくつかあります。
background省略形プロパティではなくbackground-imageを使用します。- 最後に
background-sizeを設定し、その要素にbackgroundを設定する他の CSS ルールよりも限定度を高くします。:hoverルールも忘れずにチェックしてください。 !importantプロパティをbackground-sizeに適用します。- サイズ情報を
background短縮プロパティに移動します。
参考: 背景画像のオフセット
この変更に加え、背景内での画像の配置の柔軟性が向上しました。これまでは、左上隅からの相対的な画像の位置を指定できましたが、コンテナの端からのオフセットも指定できるようになりました。たとえば、background-position: right 5px bottom 5px; を設定すると、画像は右端から 5 ピクセル、下から 5 ピクセルに配置されます。JSBin のサンプルを確認する