Webdesign

Effekte mit background

CSS bietet die Möglichkeit, Grafiken aus dem Fluss des HTML-Dokuments herauszunehmen und sie einzelnen Elementen als Hintergrundbilder zuzuweisen.
Durch diese Technik stehen unzählige Gestaltungsvarianten offen. Hier sollen nun einige beleuchtet werden, die für die Layoutgestaltung einer Seite interessant sind.

Was wird behandelt?

In diesem Tutorial werden zwei Anwendungen für Layouteffekte mit dem background-Element vorgestellt.

Dann also ans Werk!

Anwendung 1: Variationen von Linien

In CSS kann man durch das border-Element Striche verschiedener Dicke sowie gestrichelte, gepunktete und einige andere Linien zeichnen. Manchmal wird das aber einfach zu langweilig und man möchte etwas gestalten, woran das Auge des Besuchers ein wenig haften bleibt. Das geht sehr leicht mit dem background-Element (ein erstes Beispiel für eine solche Linie sehen Sie rechts von diesem Text).

Um eine grafisch etwas anspruchsvollere Linie zu ziehen, brauchen wir eine kleine Grafik, die per CSS dann in x- oder y-Richtung wiederholt wird.

Eine solche Grafik für eine vertikale Linie könnte z.B. so aussehen: . Mit dieser Grafik können wir den linken Navigationsbereich einer Seite optisch von Hauptinhaltsbereich trennen, wie das im ersten Beispiel gemacht ist. Die Navigation befindet sich in einem div, das die id "nav" trägt.

Der CSS-Code für diese Anwendung ist ganz einfach:

  1. #nav {
  2. background:url(bg_bsp1.gif) 100% 0% repeat-y;
  3. }
  4. Code-Download: /code/tut-bg-01.txt

Die Schreibweise für das background-Element ist eine Kurzform, die die Angaben für background-image, background-position und background-repeat enthält. Im Einzelnen bedeutet das CSS folgendes:

Das Hintergrundbild soll bg_bsp1.gif sein, es soll in horizontaler Richtung ganz rechts positioniert werden (100%) und in vertikaler Richtung ganz oben (0%). Das Bild soll in vertikaler Richtung wiederholt werden, so dass es das ganze Element ausfüllt (repeat-y). Die Angabe zur vertikalen Position könnten wir uns sparen, weil repeat-y genauso wie repeat-x immer in beide Richtungen angewandt wird. Weil aber die Regel mit nur einer Positionsangabe unvollständig wäre, schreiben wir die 0% dazu.

Natürlich kann man dieses Prinzip auch horizontal anwenden, wie im zweiten Beispiel. Die Grafik sieht so aus: (die ist nicht schön, ich weiß, soll aber ja auch nur das Prinzip verdeutlichen).

Der CSS-Code ist dem vorhergehenden sehr ähnlich, lediglich die repeat-Richtung und die Positionierung sind anders.

  1. #header {
  2. background:url(bg_bsp2.gif) left bottom repeat-x;
  3. }
  4. Code-Download: /code/tut-bg-02.txt

Zu beachten ist, dass man für die Positionierung Prozentangaben und Positionsstichwörter (top, left etc.) nicht mischen darf. Also immer nur Stichwörter alleine oder aber Prozentangaben oder aber absolute Werte in Pixeln. Prozent- und Pixelangaben dürfen gemischt werden.

Anwendung 2: Feststehende Hintergrundbilder

Ein Element aus der background-Familie haben wir in den bisher gezeigten Kurzschreibweisen noch gar nicht angesprochen: background-attachment.

Damit legt man fest, ob ein Hintergrundbild sich mit seinem Element bewegen soll, wenn der Anwender die Seite scrollt oder ob es immer an seinem Platz verharrt. Im zweiten Fall ist das Browserfenster das Bezugssystem für die Positionsangaben unabhängig von den Elementen der HTML-Datei.

In den beiden oberen Beispielen haben wir einfach den in den Browsern voreingestellten Wert von background-attachment verwendet und mussten ihn daher nicht explizit schreiben. Die Voreinstellung lässt Hintergrundbilder mit ihren Elementen mitscrollen, die CSS-Deklaration würde ausgeschrieben so aussehen:

  1. background-attachment:scroll;
  2. Code-Download: /code/tut-bg-03.txt

Nun möchten wir aber die feststehende Variante verwenden und damit einen Effekt wie im Beispiel 3 erzeugen. Wiederum sorgt eine einfache CSS-Regel für diesen Effekt.

  1. body {
  2. background: #F1EDCF url(bg_bsp3.gif) bottom right no-repeat fixed;
  3. }
  4. Code-Download: /code/tut-bg-04.txt

Das <body>-Tag bekommt alle Angaben zum Hintergrund: zuerst die Hintergrundfarbe, dann den Dateinamen der Grafik, die Positionsangaben. no-repeat bedeutet, dass die Grafik nicht wiederholt (d.h. nicht gekachelt) wird und schließlich das Wichtigste: fixed sorgt dafür, dass die Grafik beim Scrollen immer in der rechten unteren Ecken klebt und der Rest des Dokuments sich darüber hinweg bewegt.

Fertig

Die vorgestellen Anwendungen sollten die Grundprinzipien der Gestaltung mit dem background-Element verdeutlichen. Natürlich lassen sich mit Kombinationen verschiedener background-Elemente von mehreren Seitenelementen weitaus anspruchsvollere Effekte erzielen, als die grundlegenden Beispiele dieses Tutorials. Lassen Sie Ihrer Phantasie freien Lauf!

Zuletzt geändert am 02.03.2006

1Karl Hunhold schrieb am 19. August 2005, 10:09 h    # 

Lieber Andreas,

zunächst einmal möchte ich zu deiner ausgezeichneten Website gratulieren. Selten ein solch unaufdringliches Design gesehen. Dann die praktischen Links zu Tipps und zum Selbermachen. Super.
Also nochmals: ich bin von deiner Webseite absolut begeistert – so elegant, übersichtlich einfach schön.

2Ludger Schmidt schrieb am 24. September 2005, 00:02 h    # 

... gibt es etwas, was man auf dieser seite noch verbessern könnte? gratuliere.

3rené schrieb am 20. Oktober 2005, 20:27 h    # 

Eine exellente Seite.

Glückwunsch!

Haben die Kommunen sich schon bei Dir gemeldet?;-)

4Fritz schrieb am 28. November 2005, 16:58 h    # 

Hallo Andreas …

... also ich bin ja mit “Superlativen” normalerweise recht geizig. Doch Deine Seite ist optisch und inhaltsmässig einfach nur stark … ganz grosser Bahnhof echt !!! Du zeigst, dass dezenter Einsatz von Stilmitteln und “weniger ist mehr” sich äusserst wohltuend auswirken kann …

Viele Grüsse

5brigitte schrieb am 28. Januar 2006, 18:52 h    # 

Hallo Andreas,
die didaktische Aufbereitung Deiner Lessons ist wirklich hervorragend. Mach bitte weiter und laß uns weiter lernen…

Danke für dein Engagement!!!

Brigitte

6Johannes schrieb am 2. März 2006, 21:16 h    # 

Hallo Andreas,

vielen Dank für die sehr guten Tutorials zu CSS. Gerade für Einsteiger sehr empfehlenswert.

Freundliche Grüße

Johannes

7ak schrieb am 2. März 2006, 21:19 h    # 

Vielen Dank, freut mich zu hören, wenn die Tutorials nützlich sind.

8robin schrieb am 11. April 2006, 14:29 h    # 

Super Homepage, die CSS-Tutorials sind echt gut. Großes Kompliment!!

9Holger schrieb am 27. August 2006, 17:35 h    # 

Hallo,

auch ich muss ein Lob loswerden, eine tolle Seite ( nicht nur inhaltlich), angenehme warme Farben.
Danke fuer die Tutorials.

Gruß
Holger

10Suchmaschinenmarketing - Webdesign & Multimedia Anwendungen schrieb am 7. September 2006, 04:34 h    # 

Einfach Genial!

Dein Tutorial hat mir echt sehr geholfen! Jetzt habe ich endlich einen wichtigen bereich fertigstellen können.

Gruss
TP

11Dietmar schrieb am 27. Januar 2007, 12:41 h    # 

tolle seite mit vielen nützlichen tipps :)
DANKE

12Michael schrieb am 30. Januar 2007, 00:08 h    # 

Hallo,
ist super erklärt und hat auch gleich auf anhieb funktioniert. Werde meine Seiten nach und nach auf das CSS-Layout umstellen.

Gruss Michael

13OG schrieb am 13. März 2007, 10:45 h    # 

Dank für Deine instruktiven Ausführungen. Bin noch dabei, alles nachzuvollziehen und stoße immer wieder auf kleine und etwas größere Komplikationen. Insgesamt ist jedoch alles sehr schlüssig. Gruß OG

14OG schrieb am 13. März 2007, 10:51 h    # 

Würde mich freuen, wenn Du mit Deinen instruktiven Ausführungen uns auch in Zukunft hilfreich sein könntest. Gruß OG

15Google Pack schrieb am 5. September 2007, 02:24 h    # 

Das hoffe ich auch oder sonst uns mal vll. eine Liste mit hilfreichen Seiten gibst. Klar man kann auch eben googlen aber wenn es schlecht beschrieben ist lernt man nicht so gut ;)

16Sturm1978 schrieb am 20. Februar 2008, 10:03 h    # 

Ich möchte Dir zu der gelungenen Website gratulieren. Da ich gerade erst Gefallen an der Erstellungen von Websites gefunden habe, kann ich mich nur für so gute und ausführliche Sites bedanken.
Sehr Hilfreich. Weiter so.