Webkrauts: Für mehr Qualität im Web.

Artikel

Mehrfacher Einsatz von Hintergrundgrafiken

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

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

Hintergrundgrafik mit background-repeat: repeat-x

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

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.

Zum Autor

Nils Pooker war im Kunstbereich tätig und arbeitet als selbständiger Webdesigner in Preetz (Schleswig-Holstein). Außerhalb des Webdesigns beschäftigt er sich mit Theorien zu Wahrnehmung und Kommunikation.

Info:

Mehrfacher Einsatz von Hintergrundgrafiken ist Beitrag Nr. 297

Autor:

Nils Pooker am 13. Dezember 2007 um 00:00

Kategorie:

Adventskalender 2007

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

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

   Kommentar by Daniel - 13. Dezember 2007 um 00:07

2. 2.
   

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

   Kommentar by macx - 13. Dezember 2007 um 11:47

3. 3.
   

   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.

   Kommentar by David - 13. Dezember 2007 um 11:58

4. 4.
   

   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)

   Kommentar by Webstandard-Team - 13. Dezember 2007 um 13:00

5. 5.
   

   > 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

   Kommentar by Achim H - 14. Dezember 2007 um 03:46

6. 6.
   

   Nachtrag:

   background-attachement gibt es nicht

   mfg Achim

   Kommentar by Achim H - 14. Dezember 2007 um 04:46

7. 7.
   

   @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)."

   Kommentar by Nils Pooker - 14. Dezember 2007 um 09:09

8. 8.
   

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

   Kommentar by Achim H - 15. Dezember 2007 um 15:40

9. 9.
   

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

   Kommentar by Grafiken - 7. Januar 2008 um 14:31

10. 10.
    

    Danke für diesen hilfreichen Beitrag.

    Ralph

    Kommentar by Ralph - 14. April 2008 um 20:47

Kommentar-Feed für diesen Beitrag

Entschuldige, das Kommentarformular ist zurzeit geschlossen.