Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)

NEU:
WordPress 4

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

7.8 Hintergrundgrafiken per CSS

Grafiken mit Informationsgehalt wie z. B. das Logo im Kopfbereich werden mit dem Element img in den HTML-Quelltext eingebunden. Ziergrafiken hingegen werden im CSS als Hintergrundgrafiken eingebaut.

Hintergrundgrafik einbinden: background-image

Wenn Sie zum Beispiel dem Kopfbereich einen Farbverlauf geben wollen, erreichen Sie das mithilfe einer Hintergrundgrafik. 

Mit den genauen Werten können Sie ruhig etwas experimentieren. Die Beispielgrafik ist genauso breit wie #wrapper (720px), 5px hoch, und der Farbverlauf geht von der aktuellen Hintergrundfarbe #f3c600 bis zu einem helleren Gelbton mit dem Wert #ffe574:

Abbildung 7.9: Lang und dünn – Hintergrundgrafik mit Farbverlauf
Abbildung 7.9: Lang und dünn – Hintergrundgrafik mit Farbverlauf

Sie finden die fertige Hintergrundgrafik auch auf der Buch-CD.

ToDo: Fügen Sie eine Hintergrundgrafik für den Kopfbereich ein
  1. Ergänzen Sie das Stylesheet um die hervorgehobene gedruckte Zeile:

    #kopfbereich {
      color: black;
      background-color: #f3c600;
      background-image: url(farbverlauf.jpg);
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 0;
      padding-left: 20px;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Die Hintergrundgrafik legt sich über die Hintergrundfarbe, sodass diese nur sichtbar wird, wenn die Grafik aus irgendeinem Grund nicht (oder nicht mehr) angezeigt wird.

Die Wegbeschreibung zur Hintergrundgrafik

Die Pfadangabe zur Grafikdatei bezieht sich immer auf den Speicherort der CSS-Datei. Pro HTML-Element können Sie nur eine Hintergrundgrafik einbinden.

Hintergrundgrafiken kacheln: background-repeat

Wie im HTML wird eine Hintergrundgrafik horizontal und vertikal so lange gekachelt, bis der zur Verfügung stehende Raum aufgebraucht ist. Im CSS gibt es allerdings viel mehr Möglichkeiten.

Sie können die Grafik z. B. nur in eine Richtung kacheln, wobei es drei Variationen gibt:

  • Eine vertikale Kachelung entlang der y-Achse (untereinander) erzielen Sie mit background-repeat: repeat-y.
  • Eine horizontale Wiederholung entlang der x-Achse (nebeneinander) geben Sie mit background-repeat: repeat-x an.
  • Wenn eine Hintergrundgrafik gar nicht gekachelt werden soll, benutzen Sie den Wert background-repeat: no-repeat.

Die Beispielseiten haben eine feste Breite von 720px, und deshalb ist die Angabe von background-repeat nicht nötig. Bei einem flexiblen Design hingegen wissen Sie nicht im Voraus, wie breit die Webseite sein wird, und die 720px breite Grafik würde ab dem 721. Pixel wieder von vorne beginnen, was meistens eher nicht so toll aussieht.

Die Hintergrundgrafik beginnt rechts wieder von vorne
Abb 7.10: Die Hintergrundgrafik beginnt rechts wieder von vorne

Um dieses Problem zu lösen, gibt es zwei verschiedene Ansätze:

Sie machen die Grafik breiter. Das grundlegende Problem bleibt dabei allerdings erhalten, denn Sie wissen nie wirklich, wie breit die Grafik sein muss, weshalb viele Webdesigner über 2000px breite
Hintergrundgrafiken benutzen.

Sie kacheln die Grafik nur vertikal (mit repeat-y) und ändern die Hintergrundfarbe in die hellste Farbe des Farbverlaufs, sodass der Farbverlauf nach der Grafik nahtlos in eine konstante Hintergrundfarbe
übergeht.

Mit der zweiten Möglichkeit sieht der Kopfbereich so aus:

Nahtloser Übergang in eine konstante Hintergrundfarbe
Abb. 7.11: Nahtloser Übergang in eine konstante Hintergrundfarbe

Dieser Effekt wird mit folgendem CSS erreicht (wobei ich padding und andere Eigenschaften der Übersichtlichkeit halber weggelassen habe):

#kopfbereich {
  background-color: #ffe574;
  background-image: url(farbverlauf.jpg);
  background-repeat: repeat-y; /* nur vertikal (untereinander) */
}

Hintergrundgrafik positionieren: background-position

Hintergrundgrafiken können auch innerhalb des Elements positioniert werden. Im folgenden Beispiel beginnt sie links oben:

#kopfbereich {
  background-color: #ffe574;
  background-image: url(farbverlauf.jpg);
  background-repeat: repeat-y; /* nur vertikal (untereinander) */
  background-position: left top;
}

Die Position der Hintergrundgrafik kann mit den Worten left, right, top, bottom oder center bestimmt werden. Wenn zwei Werte verwendet werden, steht der erste für die horizontale und der zweite für die vertikale Position.

Zentrieren können Sie eine Grafik einfach mit dem Wert center:

  • background-position: center;

Hintergrundgrafik fixieren: background-attachment

Normalerweise scrollt eine Hintergrundgrafik mit der Seite mit, aber Sie können die Grafik auch fest positionieren:

#kopfbereich {
  background-color: #ffe574;
  background-image: url(farbverlauf.jpg);
  background-repeat: repeat-y; /* nur vertikal (untereinander) */
  background-position: left top;
  background-attachment: fixed;
}

Wenn die Hintergrundgrafik fixiert ist, rollt der Inhalt beim Scrollen über die Hintergrundgrafik hinweg, was zum Teil wirklich verblüffende Effekte ergibt.

Mozart und der fixierte Hintergrund

Ein wunderschönes Beispiel dafür ist die Mozart-Variante des Zen Garden:

Achten Sie beim Scrollen auf die Noten im Hintergrund.

Die Kurzschreibweise: background

Es gibt zur Definition der Hintergrundformatierung mit der Eigenschaft background auch eine Kurzschreibweise. Für die Beispielseiten würde das etwa so aussehen:

#kopfbereich {
  background: #ffe574 url(farbverlauf.jpg) repeat-y left top;
}

Mit dieser Schreibweise legen Sie alle Formatierungen für den Hintergrund in einer einzigen Zeile fest: zuerst die Farbe, dann die Grafik und deren Wiederholung und Positionierung.