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 – 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
-
-
-
-
-
-
-
-
-
(Gesperrt)
Grafiken im Hintergrund: background4 Min. 41 Sek.
-
(Gesperrt)
Farbverläufe mit linear-gradient()3 Min. 45 Sek.
-
(Gesperrt)
Schattenboxen mit box-shadow2 Min. 46 Sek.
-
(Gesperrt)
Abgerundete Ecken mit border-radius2 Min. 40 Sek.
-
(Gesperrt)
Call To Action: Hyperlinks als Button gestalten4 Min. 2 Sek.
-
(Gesperrt)
Boxen am Bildschirm ausblenden: die Klasse visually-hidden4 Min. 22 Sek.
-
(Gesperrt)
Challenge: Kontaktseite gestalten1 Min. 13 Sek.
-
(Gesperrt)
Solution: Kontaktseite2 Min. 29 Sek.
-
(Gesperrt)
-
-