CSS-Hintergrund-Abkürzung für mobile WebKit-Browser

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-Property background.
  • Legen Sie zuletzt die background-size fest, und zwar mit einer höheren Spezifität als alle anderen CSS-Regeln, mit denen background für dieses Element festgelegt wird. Denken Sie auch daran, die Regeln zu überprüfen und :hover zu verwenden.
  • Wenden Sie die Eigenschaft !important auf background-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.