Nachdem Rufe nach neuen (Einsteiger-)Tutorials laut wurden und eben im Marshmallow City-Forum eine entsprechende Frage aufkam, gibt’s hier nun das nächste Tutorial. Diesmal beschäftigen wir uns mit der Gestaltung von Hintergründen für eure Webseite.
Generell könnt ihr allen Elementen einen Hintergrund zuweisen: sei es der ganzen Seite, einzelnen Div-Containern, Überschriften, Links, Eingabefeldern von Formularen, oder oder oder…
Ihr könnt für den Hintergrund eine Farbfläche anlegen – oder aber auch ein Bild verwenden. Wie das geht, zeige ich euch hier.
so geht’s
Ihr sprecht das jeweilige Element über seinen Namen, seine Klasse oder ID im Stylesheet – das ist die Datei mit der Endung *.css – an und legt dann fest, wie der jeweilige Hintergrund aussehen soll: background ist die Eigenschaft des Elements, die wir brauchen, und #4aa5b4 ist ihr Wert – wobei diese auf den ersten Blick kryptischen Zeichen nichts anderes als die Farbe festlegen. Die Raute # wird gefolgt vom RGB-Wert der Farbe. Wie das mit den Farben in CSS funktioniert, könnt ihr in diesem Tutorial nachlesen: Farben in HTML & CSS
In diesem Beispiel erhält eure gesamte Seite, die ja durch das body-Tag eingeschlossen wird, einen türkisfarbenen Hintergrund:
body {
background: #4aa5b4;
}
Falls ihr im Umgang mit CSS noch nicht so vertraut seid oder euch fragt, wie man dieses Stylesheet in die Seite einbindet, empfehle ich euch die folgenden Tutorials:
Farbe
Für die einfachste Variante eines Hintergrunds weist ihr diesem einfach eine Farbe zu – so wie in dem obigen Beispiel. Dafür müsst ihr einfach die Eigenschaft background notieren und dahinter den RGB-Wert eurer Farbe.
body {
background: #4aa5b4;
}
gekacheltes Hintergrundbild
Wenn ihr eine Hintergrundgrafik verwendet, könnt ihr das ganze Element damit “kacheln”, sie also waagerecht und senkrecht immer wieder wiederholen. Dies bietet sich vor allem dann an, wenn ihr ein Pattern habt, das man nahtlos immer wieder aneinander fügen kann, ohne dass man den Übergang zwischen den einzelnen Bildern erkennt.
background: #ccc url(images/back.jpg);
Mit #ccc legen wir erst einmal eine Hintergrundfarbe fest, die angezeigt wird, falls das Hintergrundbild nicht gefunden wird oder nicht die gesamte Fläche abdeckt. Dann folgt das Schlüsselwort url und in Klammern der Pfad zu eurer Grafik. Mehr müsst ihr nicht notieren, da die Angabe repeat der Standardwert ist und sich der Browser so verhält, als stünde explizit Folgendes da:
background: #ccc url(images/back.jpg) repeat;
Hintergrundbild nicht wiederholen
Wenn eure Hintergrundgrafik nur ein einziges Mal angezeigt und nicht gekachelt werden soll, fügt ihr dem obigen Code die Anweisung no-repeat hinzu:
background: #ccc url(images/back.jpg) no-repeat;
Hintergrundgrafik nur horizontal oder nur vertikal wiederholen
Manchmal möchte man aber auch, dass die Hintergrundgrafik nur in der Horizontalen oder Vertikalen wiederholt wird, beispielsweise wenn sich der Hintergrund nur im oberen Bereich der Webseite befinden soll. Dann notiert ihr:
background: #ccc url(images/back.jpg) repeat-x;
repeat-x steht für das horizontale Wiederholen; repeat-y für das vertikale.
die Position des Hintergrundbilds
Sooo. Bislang beginnt die Hintergrundgrafik immer am oberen und linken Rand des Elements. Aber auch das kann man beeinflussen.
Um die Position zu ändern, stehen euch die folgenden Werte zur Verfügung, die eigentlich selbsterklärend sind: top, right, bottom, left, center.
background: #ccc url(images/back.jpg) no-repeat top right;
… bedeutet also, dass die Grafik ein einziges Mal angezeigt wird, nämlich oben rechts, und der Rest des Elements einen grauen Hintergrund hat.
mitscrollen oder nicht?
Zu guter Letzt gibt es dann noch das Verhalten, wenn das Element größer ist als der Bildschirmausschnitt und der User somit scrollt: soll das Hintergrundbilf fest stehenbleiben (fixed) oder mitscrollen (scroll)?
background: #ccc url(images/back.jpg) no-repeat top right scroll;
Anmerkungen
Was ich euch hier gezeigt habe, ist die sogenannte Kurzschreibweise. Die lange (unpraktischere) Form bestünde statt des universellen background aus den einzelnen Angaben background-image, background-position, background-attachment und so weiter, was jede Menge überflüssige Schreibarbeit bedeutet. ;-)