Anzeige
Anzeige
UX & Design

CSS3: Neue Möglichkeiten mit Hintergrundgrafiken

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

Von Denis Potschien
3 Min.
Artikel merken
Anzeige
Anzeige

 

Mulitple Hintergründe mit CSS3

Anzeige
Anzeige

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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (10)

Community-Richtlinien

Sven Wappler

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 ;-)

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige