index,follow

CSS3 background-size: Hintergrundbilder skalieren (für alle)

18.01.2012, 14:59 von Daniel || (Kommentare: 16) || Mit anderen teilen

Mit der CSS3-Eigenschaft background-size gibt es endlich die Möglichkeit, im Stylesheet eingebundene Bilder zu skalieren. Damit lassen sich Grafiken beispielsweise auf das gesamte Browserfenster anpassen.

Was bisher mit teils aufwendigen Skripten gelöst werden musste, lässt sich dank CSS3 mit nur einer Anweisung lösen. Lästiges abfragen der Viewport-Werte, ausrechnen des Seitenverhältnisses und korrektes Platzieren des Bildes übernimmt nun der Browser.

Die Syntax

Der Eigenschaft background-size können numerische Werte oder die Schlüsselwerte auto, contain oder cover gegeben werden.

.meineKlasse {
  background:url(pfad/zum/bild.png) no-repeat;
  background-size:100% auto;
}

Das obige Beispiel 1 zieht die Grafik auf 100% Breite und berechnet die Höhe passend dazu. Analog verhält es sich mit der Angabe der Höhe. Es ist natürlich auch möglich, zwei numerische Werte für Breite und Höhe anzugeben, die auch absolute Einheiten wie px haben können.

.meineKlasse {
  background-size:contain;
}

Die Angabe contain skaliert die größere Seite der Grafik in das Element, sodass das Bild das Element vollständig ausfüllen sollte. Der Wert cover nimmt als Bezugspunkt die kleinere Seite der Grafik. Bei beiden Angaben wird das Seitenverhältnis beibehalten.

Die Spezifikation und weitere Einzelheiten sind beim W3C zu finden.

Browser-Unterstützung

Chrome Firefox Internet Explorer Opera Safari
seit 4.0
seit 4.0 (3.6 1)
seit 9
seit 10.5 (10.0 2)
seit 5.0 (3.1 3)

1 ... mit Präfix -moz-
2 ... mit Präfix -o-
3 ... mit Präfix -webkit-

Wie in der Tabelle zu sehen, gibt es seitens der Browser bereits breite Unterstützung. Nur die Versionen des Internet Explorer bis 8 spielen da nicht mit. Hierfür sollte man eine Behelfslösung a la Polyfill oder Fallback finden, mit der man das gewünschte Verhalten simulieren kann.

Quelle: caniuse.com

Lösung für ältere Browser

Muss oder möchte man ältere Browser wie den Internet Explorer 8 oder ältere Fossile beachten, so bleibt eine JavaScript-Lösung (hier mit jQuery) unumgänglich.

Hierfür hilft eine kleine Funktion, die background-size mittels absolut positioniertem Bild simuliert. Denn herkömmliche img-Tags lassen sich seit jeher skalieren.

Der Funktion können 3 Parameter mitgegeben werden. Der erste ist das Element, auf den man die Eigenschaft anwenden möchte, die beiden letzteren sind die Größenangaben und beide optional.

function pseudoBgSize(el, bgWidth, bgHeight) {
  if (el) {
    $(el).css("background-image").match(/"(.*)"/);
    var elBg = RegExp.$1;

    if (!$(el) || $(el).css("z-index") != "")
      $(el).css("z-index", "10");
    else
      var elZIndex = parseInt($(el).css("z-index"));
    if (!bgWidth)
      bgWidth = "auto";
    if (!bgHeight)
      bgHeight = "auto";

    $(el).css("background", "transparent").append("<div style='position:absolute; z-index:" + elZIndex + "; top:0; left:0; width:100%'><img src='" + elBg + "' alt='' style='width:" + bgWidth + "; height:" + bgHeight + "'></div>");
  } else
    return false;
};

Kurze Erläuterung

Die Funktion fragt als erstes die background-image-Eigenschaft des übergebenen Elements ab und speichert das dort angegebene Bild samt Pfad ab. Danach werden die übergebenen Werte Größe und Höhe überprüft und ggf. auf auto gesetzt. Zum Schluß wird ein Container erstellt, in dessen das Bild samt zugehöriger Werte gelegt wird. Dieser Container wird nun in das übergebene Element eingehangen. Voila!

Aufgerufen wird die Funktion nun beispielsweise so:

pseudoBgSize(".meineKlasse", "100%"); // nur mit Übergabe des Elements und der Breite

Wichtig hierbei ist allerdings, dass das Element, für das die background-size-Eigenschaft simuliert wird, nicht die Standardangaben zur Positionierung enthält, sondern beispielsweise folgende Werte hat:

.meineKlasse {
  position:relative;
  z-index:10;
}

Schließlich muss der in der Funktion erzeugte Container an die richtige Stelle gebracht werden.

Natürlich ist diese Funktion nur rudimentär, sie deckt aber die gröbsten Möglichkeiten von background-size ab. Fragen und/ oder Anregungen sind in den Kommentaren herzlich willkommen.

Bildquelle: GOTOCHINA ringvemedia.com

Schlüsselwörter zu diesem Beitrag

« Zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Einen Kommentar schreiben

18.04.2012 von Mario

*CSS3 background-size: Hintergrundbilder skalieren (für alle) *

Erstmal gute Arbeit! ;)

bekomme ich das nicht ganz hin..

_____
.meineKlasse {
background-size:contain;
_____

ist hier der Knackpunkt, welche Klasse soll hier den Abschluss bilden, damit der BG immer full screen skaliert wird?

mfG
mario

23.04.2012 von Daniel

Hallo Mario,

ich kann dir leider nicht ganz folgen. Bezieht sich deine Frage auf background-size oder den jQuery-Nachbau?

09.05.2012 von Gunnar

Funktioniert prima! Vielen Dank dafür

18.03.2013 von Manfred

Danke das hat mir jetzt wirklich geholfen

27.06.2013 von Jo

Ich würde gerne auf die jquery-Lösung zurückgreifen. Benötige es für einen ie4 :( in einem <td>-Tag. Nur habe ich keine Ahnung wie ich es aufrufen soll. Im onload vom Body zieht er mir das Bild über den gesamten Bildschirm und im <td>-Tag selbst wüsste ich nicht, welches js-Event ich nutzen sollte??? Und was du hiermit meinst, ist mir leider auch ein Rätsel: "Schließlich muss der in der Funktion erzeugte Container an die richtige Stelle gebracht werden." Vielleicht könntest du da noch zwei bis drei Zeilen Beispielcode hinzufügen.

28.06.2013 von Daniel

Hallo Jo,

versuch's doch mal so:

$(document).ready(function() {
pseudoBgSize('table td', '100%');
});

Sobald die Seite geladen ist, wird die Funktion aufgerufen, der du als Parameter die Tabellenzellen mitgibst, die mit einem Hintergrundbild versehen sind. Die Angabe 'table td' ist hier etwas unspezifisch, du solltest diese Tabelle daher mit einer Klasse versehen und den Aufruf ergänzen:

pseudoBgSize('table.meineKlasse td', '100%');

Zu deiner Abschlussfrage:
Die Funktion pseudoBgSize nimmt sich das im CSS definierte Hintergrundbild und bindet es als <img>, welches in einem <div> liegt, ein. Mit Container habe ich dieses <div> gemeint.

15.08.2013 von Dave

Danke. Das habe ich gesucht - bei mir hat das nicht funktioniert. Ich habe einfach den Wert background:cover nutzen wollen... reicht scheinbar nicht mehr.

07.12.2013 von Markus

Hat mir sehr weitergeholfen :-)
Als Anfänger ist man auf solche Dinge essentiell angewiesen.

Noch eine Frage dazu: Kann ich auch einen hintergrund festlegen aus mehreren bildern ? Also quasi den Bereich 3teilen und eine Grafik oben eine in der Mitte und eine unten rreinhängen ?

Oder bin ich damit weg vom Thema ?

LG

09.12.2013 von Daniel

Hallo Markus,

man müsste das Script erweitern, was sicherlich möglich wäre. Wenn du mit mehreren Hintergründen arbeiten möchtest, dann nutze einfach mehrere HTML-Elemente - mit jeweils einem Hintergrundbild - die du so positionierst wie du es brauchst. Eine andere Möglichkeit fällt mir jetzt auf die Schnelle nicht ein.

Am einfachsten hast du es natürlich, wenn du auf den Support von älteren Browsern verzichten kannst. Alle Browser bis hin zum IE9 unterstützen multiple Backgrounds in einem Element. Siehe auch hier: http://caniuse.com/#feat=multibackgrounds

29.01.2014 von Cabal

Hallo Daniel, danke für den Beitrag aber leider funktioniert das bei mir im IE nicht. Im IE 10 gehts, jedoch wenn ich den Kompatibilitätsmodus für ältere IE's anschalte, isses vorbei.

30.01.2014 von Daniel

Hallo Cabal,

bringt dir der IE eine Fehlermeldung und wenn ja, wie sieht die aus?

Daniel

04.01.2015 von kai

hi Daniel,
muss dieses .meine klasse da sein?

05.01.2015 von Daniel

Hallo Kai,

.meineKlasse ist der Selektor für das HTML-Element. Natürlich kann der auch anders lauten; oder du nimmst eine ID, z.B. #element. Aber irgendwie musst du das Element ja auch ansprechen können.

Daniel

05.03.2015 von Fabian

Das sollte seinen Zweck erfüllen:

div#wrapper {
display: block;
position: absolute;
z-index: 10;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: transparent url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale')";
}

05.03.2015 von Fabian

Das sollte funktionieren:

div#wrapper {
display: block;
position: absolute;
z-index: 10;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: transparent url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale')";
}

09.03.2015 von pldgamerdx

Ich hab das schon mal ausprobiert und zwar so: .meineKlasse
<background:url(Pfad/zum/images2.jpg) no-repeat;
background-size:100% auto;>
Aber, wenn ich es immer teste kommt dort kein Bild raus. Kannst du mir helfen?



Nutze Deinen Gravatar.


Was ist die Summe aus 1 und 9?