Anfang des Jahres hat WebKit das Verhalten der CSS-background
-Kurzform aktualisiert. Mit dieser Änderung setzt die Kurz-Eigenschaft background
die background-size
auf den Standardwert auto auto
zurück, wenn er nicht in der Kurz-Deklaration festgelegt ist. Mit dieser Änderung entsprechen Chrome und andere WebKit-Browser der Spezifikation und entsprechen dem Verhalten von Firefox, Opera und Internet Explorer.
Da Chrome für Android zu den aktuellen WebKit-Versionen kommt, wird diese Änderung jetzt auch in Android eingeführt. Da dies eine Problembehebung für webkit war, sind Websites, die in mehreren Browsern getestet wurden, wahrscheinlich nicht betroffen.
Bisherige Vorgehensweise
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
Das Kurzattribut background
enthält keine Größeneigenschaft und setzt daher background-size
auf den Standardwert auto auto
zurück.
Bildgröße richtig angeben
// 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;
}
Um in fooB
ein background-size
in der Kurzform background
anzugeben, muss zuerst position
(0%), gefolgt von einem Schrägstrich und dann background-size
(50 px 40 px) angegeben werden.
Korrekturen für vorhandenen Code
Es gibt mehrere Möglichkeiten, dieses Problem zu beheben:
- Verwende
background-image
anstelle der Kurz-Propertybackground
. - Legen Sie zuletzt die
background-size
fest, und zwar mit einer höheren Spezifität als alle anderen CSS-Regeln, mit denenbackground
für dieses Element festgelegt wird. Denken Sie auch daran, die Regeln zu überprüfen und:hover
zu verwenden. - Wenden Sie die Eigenschaft
!important
aufbackground-size
an. - Verschieben Sie die Größeninformationen in die Kurzform
background
.
Bonus: Offsets von Hintergrundbildern
Zusätzlich zu dieser Änderung kannst du das Bild jetzt flexibler im Hintergrund positionieren. Früher konnten Sie nur die Bildposition relativ zur oberen linken Ecke angeben, jetzt können Sie einen Versatz von den Rändern des Containers angeben. Wenn du beispielsweise background-position: right 5px bottom 5px;
auswählst, wird das Bild 5 Pixel vom rechten Rand und 5 Pixel vom unteren Rand entfernt. Sehen Sie sich dieses Beispiel in JSBin an.