Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.100 Kurse von Branchenfachleuten.

Grafiken im Hintergrund: background

Grafiken im Hintergrund: background – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Grafiken im Hintergrund: background

Auf dieser Seite soll jetzt statt der Hintergrundfarbe eine Hintergrundgrafik eingebunden werden. Diese Hintergrundgrafik sieht so aus, also eine Art Holzvertäfelung, knapp 400 mal 266 Pixel groß. Und hier ist der Quelltext, hier ist bereits eine Hintergrundfarbe eingebunden. Die ist in etwa an der Grafik orientiert, denn wenn die Grafik aus welchem Grund auch einmal nicht angezeigt wird, dann fällt der Browser auf diese Farbe zurück, die sollte also einigermaßen passen. Hintergrundgrafiken bindet man ein mit dem Befehl background-image und dann gibt man mit der Funktion url die Wegbeschreibung zur Grafik an. Und hier ist die Anweisung schon komplettiert: url(bilder/hintergrund.jpg), damit findet der Browser das. Und das wollen wir gleich mal überprüfen. Einmal neu laden und da ist die Grafik, nicht hübsch, aber deutlich. Sie sehen hier, wo die zweite Reihe anfängt. Hintergrundgrafiken werden also gekachelt. Sie füllen den zur Verfügung stehenden Raum und das ist das normale Verhalten…

Inhalt