t3n News Entwicklung

CSS3: Neue Möglichkeiten mit Hintergrundgrafiken

CSS3: Neue Möglichkeiten mit Hintergrundgrafiken

Hintergrundgrafiken gibt es schon so lange, wie es gibt – zumindest fast so lange. Mit haben nun allerdings sehr viel mehr Möglichkeiten bei der Gestaltung. War es mit der Einführung von an sich schon toll, Hintergründe nur auf einer Achse oder gar nicht wiederholen zu lassen, bietet CSS3 noch sehr viel mehr Spielraum.

CSS3: Neue Möglichkeiten mit Hintergrundgrafiken

 

Mulitple Hintergründe mit CSS3

Wie bei vielen neuen Funktionen von CSS3 – und auch HTML5 – ist es auch hier so, dass nicht alle aktuelle Browser die neuen Funktionen unterstützen (von älteren mal ganz abgesehen). Daher sollte man die neuen Möglichkeiten mit Vorsicht einsetzen.

Bisher konnte man für ein Element immer nur eine Hintergrundgrafik einsetzen. Mit CSS3 hat man nun die Möglichkeit, mehrere Hintergründe auf ein Element anzuwenden. Dadurch ergeben sich interessante Motive:

CSS3: Multiple Hintergründe
CSS3: Multiple Hintergründe

Im linken Beispiel sind drei transparente Grafiken (der farbige Anteil ist zu 50 Prozent transparent, der weiße Anteil zu 100 Prozent) mit unterschiedlicher Breite, im rechten Beispiel sechs Grafiken mit unterschiedlicher Breite und unterschiedlicher Höhe eingebunden. Es entstehen so zwei Hintergründe, bei denen die Grafiken sich immer neu überlagern und so immer neue Farbkombinationen ergeben.

Das Anlegen solcher Hintergründe mit CSS3 ist einfach:

background-image: url("rot1.png"), url("gruen1.png"), url("blau1.png");

Wie ihr seht, werden die Grafiken auf altbekannte Weise eingebunden – nur mir dem Unterschied, dass nun – durch Komma getrennt – beliebig viele Grafiken eingebunden werden können. Wer zusätzliche Angaben machen will, zum Beispiel zur Wiederholung, kann diese ebenfalls für jede Grafik separat angeben:

background-image: url("rot1.png"), url("gruen1.png"), url("blau1.png");
background-repeat: repeat-x, repeat-x, repeat-y;

Unterstützt werden multiple Hintergründe vom Internet Explorer ab Version 9, Firefox ab Version 3.6, Safari ab Version 4.0, Chrome ab Version 4 und Opera ab Version 10.10.

Hintergründe ohne Anschnitt mit CSS3

Gerade bei Hintergrundgrafiken, die beispielsweise. ein Logo zeigen, ist es bisher immer so, dass diese nach rechts und unten abeschnitten werden. Mit CSS3 gibt es zwei Möglichkeiten, die dafür sorgen, dass Hintergrundgrafiken immer ohne Anschnitt dargestellt werden.

Die erste Möglichkeit verkleinert oder vergrößert die Grafiken immer so, dass sie genau ins Bild passen:

CSS3: Hintergründe ohne Anschnitt (rechts)
CSS3: Hintergründe ohne Anschnitt (rechts)

Das linke Beispiel zeigt die normale Wiederholung der Hintergrundgrafik, wie man es bisher kannte. Im rechten Beispiel wird der Hintergund so verkleinert bzw. vergrößert, dass dieser immer genau passt. Die Anzahl der Wiederholungen richtet sich dabei an den Anzeigebereich. Der Nachteil ist, dass die Grafik in der Regel verzerrt werden muss, wie das Beispiel zeigt.

Die Einbindung erfolgt so:

background-image: url("limone.png");
background-repeat: round;

Unterstützt werden gerundete Hintergründe vom Internet Explorer ab Version 9 und Opera ab Version 10.53.

Eine Alternative zu der Möglichkeit des Rundens von Hintergrundgrafiken, ist, den Abstand zwischen den Grafiken variieren zu lassen:

CSS3: Hintergründe ohne Anschnitt (rechts)
CSS3: Hintergründe ohne Anschnitt (rechts)

Das linke Beispiel zeitgt wieder die normale Wiederholung. Im rechten Beispiel wird der Abstand zwischen den Grafiken so angepasst, dass diese nicht beschnitten werden. Der Vorteil dieser Möglichkeit im Vergleich zum Runden ist, dass die Grafiken nicht vergrößert, verkleinert oder verzerrt werden müssen.

Die Einbindung erfolgt so:

background-image: url("limone.png");
background-repeat: space;

Unterstützt werden diese Hintergründe vom Internet Explorer ab Version 9 und Opera ab Version 10.53.

Hintergründe mit definierter Größe mit CSS3

Zuletzt soll die Möglichkeit vorgestellt werden, Hintergrundgrafiken eine absolute oder relative Größe zuzuweisen. Dazu gibt es drei Varianten. Zum einen besteht die Möglichkeit, einer Hintergrundgrafik eine feste oder prozentuale Größe zuzuweisen:

background-image: url("limone.png");
background-size: 25%;

Bei der Angabe eines festen Wertes wird die Grafik proportional vergrößert bzw. verkleinert. Eine prozentuale Angabe orientiert sich am Anzeigebereich, nicht an der Grafik.

Die anderen beiden Varianten kommen ohne relative oder absolute Angaben aus:

CSS3: Hintergründe mit definierter Größe
CSS3: Hintergründe mit definierter Größe

Die Hintergrundgrafik im Beispiel links nimmt immer die volle Breite des Anzeigebereichs ein und wiederholt sich nach unten. Das Beispiel rechts nimmt immer die volle Breite und Höhe des Anzeigebereichs ein und schneidet die Grafik rechts oder unten ab.

Unterstützt werden diese Hintergründe vom Internet Explorer ab Version 9, Firefox ab Version 4.0, Safari ab Version 5.0, Chrome ab Version 4 und Opera ab Version 10.53.

Die erweiterten Möglichkeiten für den Einsatz von Hintergrundgrafiken sind eine von vielen Neuerungen in CSS3. Wie interessant findet ihr diese neuen Funktionen? Nutzt ihr sie bereits oder kommen sie aufgrund der noch mangelhaften Browserunterstützung derzeit nicht in Frage?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von wapplersystems am 01.09.2011 (19:14 Uhr)

    Ich finde am praktischsten die background-size: cover Einstellung, die in CSS3 hinzugekommen ist. Das erlaubt das Hintergrundbild besser darzustellen, als alte Möglichkeiten. Habe das Mal in einem kleinen Projekt von mir ausprobiert: TYPO3 Demo. Klappt natürlich nur in modernen Browsern ;-)

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder

Im besten Fall sorgen CSS für kompaktes und gekapseltes Styling für Webseiten. Im Schlimmsten Fall wird CSS zur Hölle in Sachen Übersichtlichkeit und Redundanz. CSS Purge zeigt, welche Seiten die … » weiterlesen

Content first: Workflows im Zeitalter von responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign

Auch in diesem Jahr drehte es sich auf der Developer Week um UX- und UI-Design. Im Panel von Patrick Lobacher haben wir uns inspirieren lassen. » weiterlesen

CSS3-Transform: Wir peppen eure Bildunterschriften mit ein bisschen Magie auf
CSS3-Transform: Wir peppen eure Bildunterschriften mit ein bisschen Magie auf

Bildunterschriften auf Webseiten müssen nicht immer langweilig sein. Wir zeigen euch, wir ihr mit etwas CSS-Magic und einer kleinen Lib langweilige Bildunterschriften aufpeppt. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?