Mit Cascading Style Sheets werden Inhalte von dem Design getrennt. Dadurch lassen sich leicht Designänderungen vornehmen, ohne dass Texte und Bilder einer Webseite neu erstellt werden. Wir betrachten hier auch die Möglichkeiten von Cascading Style Sheet Version 3 ( CSS3 ). CSS3 befindet sich zur Zeit in der Entwicklung und wird teilweise von den aktuellen Browsern unterstützt.
Wir beginnen mit den Hintergrundeigenschaften, die sich mit CSS bieten. Als Voreinstellung ist der Hintergrund transparent. Er kann aber auch mit einer Hintergrundfarbe gefärbt werden.
Hintergrundfarbe mit CSS
Beispiel mit HTML Tag body:
…
body { background-color:#E0E0E0; }
…
Die Webseite erhält mit Hilfe des Tags “body“ mit background-color einen hellgrauen Hintergrund.
Beispiel mit externer CSS Datei:
HTML Webseite:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Hintergrundfarbe mit CSS</title>
<!– Mit Hilfe der externen CSS Datei “background.css” –>
<link rel=”stylesheet” href=”Default.css” type=”text/css”>
</head>
<body>
Die Webseite mit eingefärbten Hintergrund …
</body>
</html>
CSS Datei:
/* CSS Document */
/* Beispiel 1 mit Datei “background.html” */
body {
background: #f0e68c;
}
Ergebnis:
Hintergrundfarbe einer Webseite mit CSS
Hintergrundbild mit CSS
Beispiel mit HTML Tag body:
…
body { background-image: url(pfad/bilddatei.jpg); }
…
Ähnlich kann mit dem CSS Befehl background-image und der Angabe eines Pfades zu einer Bilddatei ein Hintergrundbild eingeblendet werden.
Beispiel mit externer CSS Datei:
HTML Webseite:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Hintergrundbild mit CSS</title>
<!– Mit Hilfe der externen CSS Datei “background-image.css” –>
<link rel=”stylesheet” href=”background-image.css” type=”text/css”>
</head>
<body>
Die Webseite mit Hintergrundbild …
</body>
</html>
CSS Datei:
/* CSS Document */
/* Beispiel 1 mit Datei “background-image.html” */
body {
background-image: url(images/auto.jpg);
}
Ergebnis:
background-image with CSS
Mehrere Hintergrundbilder mit CSS3
Beispiel mit CSS Datei:
…
background-image: url(pfad/hintergrund.jpg), url(pfad/baum.jpg), url(pfad/himmel.jpg);
background-position: center center, 30% 70%, top center;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;
…
background-image
Mit background-image werden die drei Bilder für den Hintergrund geladen.
background-position
Durch background-position wird die Position der einzelnen Bilder eingestellt. “center center” gilt für das erste Bild, “30% 70%” für das Zweite und “top center” für das dritte Bild.
Dazu gibt es weitere Parameter
[ top | bottom ]
oder
[ <percentage> | <length> | left | center | right ]
[ <percentage> | <length> | top | center | bottom ]
oder
[ center | [ left | right ] [ <percentage> | <length> ] und
[ center | [ top | bottom ] [ <percentage> | <length> ]
background-origin
Bei Elementen die nur in einer Box erzeugt werden ist der Befehl background-origin nicht notwendig. Unser Beispiel hat aber drei Elemente. Dazu gibt es drei Parameter.
padding-box
Die Position der aktuellen padding-box ist relativ zur letzten padding-box gesetzt.
border-box
Die Position der aktuellen border-box ist relativ zur letzten border-box gesetzt.
content-box
Die Position der aktuellen content-box ist relativ zur letzten content-box gesetzt.
background-repeat
Der Befehl background-repeat bestimmt, wie ein Bild wiederholt wird.
repeat
Das Bild wird so oft wiederholt bis der verfügbare Platz ausgefüllt ist. Es können auch Teile des Bildes sichtbar sein.
space
Das Bild wird so oft wiederholt bis der verfügbare Platz ausgefüllt ist. Es werden nur vollständige Bilder angezeigt.
round
Durch round wird das Bild so oft wiederholt bis der verfügbare Platz ausgefüllt ist. Es werden nur vollständige Bilder angezeigt und gegebenenfalls das Ausgangsbild in der Größe angepasst.
no-repeat
Mit no-repeat wird das Bild in der ausgewählten Richtung (Horizontal oder Vertikal) nur einmal angezeigt.
HTML Webseite:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Hintergrundbild mit CSS</title>
<!– Mit Hilfe der externen CSS Datei “more-background-images.css” –>
<link rel=”stylesheet” href=”more-background-images.css” type=”text/css”>
</head>
<body>
Die Webseite mit mehreren Hintergrundbildern …
</body>
</html>
CSS Datei:
/* CSS Document */
/* Beispiel 1 mit Datei “more-background-images.html” */
body {
background-image: url(images/auto.jpg);
background-image: url(images/auto.jpg), url(images/endy.jpg), url(images/auto.jpg);
background-position: center center, 30% 70%, top center;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;
}
Ergebnis:
Mehrere Hintergrundbilder mit CSS 3
