Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Mehrfacher Einsatz von Hintergrundgrafiken

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Mehrfacher Einsatz von Hintergrundgrafiken

Wer geschickt im Spiel mit Hintergrundgrafiken ist, kann damit die Wahrnehmung einer Webseite grundlegend verändern. Nils Pooker zeigt euch deshalb heute die Schattenseiten modernen Webdesigns. Sozusagen.

Hintergrundgrafiken sind bei vielen Webseiten ein wichtiger Bestandteil des Designs. Durch wiederholten Einsatz lassen sich die Gefahren langer Ladezeiten durch zu große oder zu zahlreich verwendete Grafiken vermeiden.

Einsatzgebiete

Hintergrundgrafiken werden eingesetzt, um entweder dem Grundlayout eine Figur-Grund-Beziehung zu geben (z. B. Faux-Columns-Technik oder abgerundete Ecken), bzw. um einzelne Seitenbereiche oder Elemente optisch hervorzuheben.

Mehrfache Verwendung einer Grafik

CSS bietet mit den Werten für das background-Element zahlreiche Möglichkeiten:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Die Syntax background-attachment: fixed; sollte man aus Rücksicht der Browserkompatibilität nur für das body-Element verwenden.

Vorteilhaft bei der gezielten Verwendung ist die Tatsache, dass eine Grafik nicht allein aus sich heraus wahrgenommen wird, sondern immer im Kontext mit der Umgebung. Beispiel: ein Photoshop-Schatten ist lediglich ein Graustufenverlauf. Dieser Verlauf wird in der Wahrnehmung des Betrachters nur dann zu einem Schatten, wenn er an eine Fläche grenzt, die heller oder dunkler ist als der tiefste Tonwert des Graustufenverlaufs. Ist der Flächentonwert identisch, erscheint er wie ein abschließender Verlauf.

Beispiele

Vertikaler und horizontaler VerlaufDiese einfachen Verläufe (vertikal und horizontal) könnte man mehrfach auf einer Website einsetzen:

Hintergrundgrafik mit background-repeat: repeat-x

Beispiele für die Positionierung von Hintergrundgrafiken

Die Beispiele 1 bis 3 zeigen den Graustufenverlauf als Schatten, der per background-position: left bottom und repeat-x dargestellt wird. Hintergrund-Tonwerte bestimmen die Wirkung des Schattens. Beispiel 4 zeigt einen mit der Hintergrundfarbe verbundenen Verlauf. In den Varianten 5 und 6 wird die an die Top-Position platzierte Grafik als sanfter Übergang in die Hintergrundfarbe wahrgenommen, in Beispiel 6 mit einer negativen vertikalen Verschiebung (background-position: 0 -10px;). Man könnte jetzt das Beispiel 4 als Link-Element wählen, der beim Hovern Beispiel 6 anzeigt. Wie sehr zusätzliche Grafikelemente die eigene Wahrnehmung beeinflusst, sieht man an den Ausschnitten rechts: die Beispiele sind identisch, wirken jedoch ohne Rand und Schatteneffekt im direkten Kontext mit dem Hintergrund anders.

Hintergrundgrafik mit background-repeat: repeat-y

Beispiele für die Positionierung von Hintergrundgrafiken

Horizontal laufende Grafiken in vertikaler Wiederholung werden oft zur Abgrenzung von Spalten (Layout oder Seitenbereiche) eingesetzt. Diese kann wie in den Varianten 1 und 4 auch unsichtbar sein (Position right in linker, bzw. left in rechter Spalte). Man sieht anhand der Beispiele 4 und 5, dass der Verlauf im Tonwert anders wahrgenommen wird, in Beispiel 4 wirkt er erheblich heller. Im Beispiel 6 wirkt die Abgrenzung weicher, die linke Spalte bekam einen 1-Pixel-Rand mit einem mittleren Grau aus dem Verlaufsbereich. Rechts die Wirkung innerhalb einer einheitlichen Umgebungsfarbe unter Verwendung von border, z. B. für Elemente oder transparente Div-Container vor einer entsprechenden Hintergrundgrafik. Die Linien selbst sind jeweils einfarbig, erscheinen aber wie Verläufe, beeinflusst durch differenzierte Tonwerte innerhalb einer gleichfarbigen Umgebung. Diese wahrnehmungsbezogenen Methoden ermöglichen so interessante Effekte in der Gestaltung von Webseiten.

Kommentare

Daniel
am 13.12.2007 - 00:07

Sehr schöner Beitrag. Das mit den div-Containern mit border ist ein sehr nützlicher Effekt.

Permanenter Link
David Maciejewski

David Maciejewski (Webkraut)
am 13.12.2007 - 11:47

Guter Grundsatzartikel für all diejenigen, die nicht sonderlich kreativ sind. Denn nicht jeder ist als Grafiker geboren.

Permanenter Link

David
am 13.12.2007 - 11:58

Intelligent eingesetzt, lässt sich mit einer einzelnen Grafik im Webdesign wirklich viel anstellen.

Neben der eingesparten Ladezeit ist ein weiterer Vorteil, dass die Zahl der HTTP-Anfragen reduziert wird, was den Seitenaufbau zusätzlich beschleunigt.

Permanenter Link

Webstandard-Team
am 13.12.2007 - 13:00

Wie schön wird es erst, wenn die Browser(hersteller) CSS3 unterstützen und der Einsatz mehrerer Hintergrundgrafiken für ein Element möglich wird ;o)

Permanenter Link

Achim H
am 14.12.2007 - 03:46

> Die Syntax background-attachement: fixed; sollte man aus Rücksicht> der Browserkompatibilität nur für das body-Element verwenden.

Sorry, aber da muss ich widersprechen. Auch <html> ist nur ein Container und in diesem lässt sich eine gefixte Grafik ebenfalls problemlos einbinden. Mir ist kein css-fähiger Browser bekannt, der eine dort formatierte Hintergrundgrafik nicht darstellen kann.

mfg Achim

Permanenter Link

Achim H
am 14.12.2007 - 04:46

Nachtrag:

background-attachement gibt es nicht

mfg Achim

Permanenter Link
Nils Pooker

Nils Pooker (Autor)
am 14.12.2007 - 09:09

@Achim H
Danke für den Hinweis auf den – auch noch schön blöd per copy+paste wiederholten – Rechtschreibfehler, ist keinem aufgefallen, mir auch nicht. Wird geändert...

Zu deinem ersten Posting: Schon korrekt, auf das html-Element lässt es sich natürlich auch anwenden. Background-attachment ist in diesem Artikel nur als Randnotiz wert gewesen, in der *gängigen Praxis* wird außerdem immer das body-Element verwendet, oder html, body: {...}, aber mit größter Wahrscheinlichkeit nicht das html-Element allein, um lediglich ein gefixtes Hintergrundbild zu definieren.

Für alle anderen deshalb nochmal zum background-attachment die Erläuterung bei selfhtml:
"Der Internet Explorer bis Version 6 interpretiert diese Eigenschaft nur bezogen auf scrollbare Elemente (dem body-Element oder anderen mit der CSS-Eigenschaft overflow:scroll bzw. overflow:auto)."

Permanenter Link

Achim H
am 15.12.2007 - 15:40

Wozu braucht man dann eine fix-positionierte Hintergrundgrafik, wenn der Container nicht scrollbar ist? - Dafür reicht doch background-position allemal.

Permanenter Link

Grafiken
am 07.01.2008 - 14:31

Ein guter und verständlicher Beitrag, auch für Nicht-Insider zu begreifen.

Permanenter Link

Ralph
am 14.04.2008 - 20:47

Danke für diesen hilfreichen Beitrag.

Ralph

Permanenter Link

Die Kommentare sind geschlossen.