CSS - Bilder und Hintergrundbilder

Auch bei Bildern hat die Trennung von Inhalt und Design nicht halt gemacht. Im HTML-Code wird vermerkt, dass ein Bild kommt und wo der Speicherort ist. In den CSS-Definitionen erfolgen die Angaben über die Größe, Ausrichtung, Abstände und Randdarstellung.

Im HTML-Code bekommt das Bild eine ID, wenn die Einstellungen nur für dieses Bild gelten sollen oder eine Klasse (class), wenn man mehrere Bilder mit derselben Größe, Ausrichtung und Eigenschaften hat.

Im folgenden Beispiel wird das Bild durch die CSS-Definition rechts ausgerichtet, mit einem Abstand nach links von 20 Pixel, so dass der Text das Bild umfließt.

<style>
#rechts {
    float: right;
    width: 234px;
    height: 123px;
    margin-left: 20px;
    border: 1px solid red;
} 
</style>

<img id="rechts" src="bilder/html-kurs-logo.gif">

<p>Hier kommt Text, der das Bild links umfließt und 
automatisch umgebrochen wird.</p>

Ergebnis im Browser

Hintergrundbilder - wie das Bild in den Hintergrund kommt

Um das Bild in den Hintergrund zu packen, gibt es mehrere Möglichkeiten. Die am weitesten verbreitete Möglichkeit ist, in der CSS-Datei einen Bereich zu definieren, der für das komplette HTML-Dokument gilt - also der HTML-Tag html bzw. body.

Beispiel: Das Bild wird nun gesetzt und wiederholt sich automatisch. Die Schriftgröße wird als 80% definiert und als Schriftart „Verdana“. Ist die Schriftart „Verdana“ auf dem Computer des späteren Besuchers nicht installiert, dann soll die Schrift „Arial“ genutzt werden, wenn vorhanden bzw. dann die Schrift „Helvetica“ und notfalls einfach eine Schrift ohne Serifen genutzt werden. Und zum Schluss wird als Farbe #ff0000 mitgegeben (was nichts anderes ist als Rot).

html, body {
  background: url(bilder/html-kurs-logo.gif);
  font: 80% Verdana, Arial, Helvetica, sans-serif;
  color: #ff0000;
}

Hintergrundbild mit Wiederholung X/Y:
https://www.html-seminar.de/beispielcode/css_bild_auf_hintergrund_mit_wiederholung.htm

Beispiel: Das Bild wird nun rechts oben (right top) gesetzt und wiederholt sich nicht.

html, body {
  background:url(bilder/html-kurs-logo.gif) no-repeat right top;
}

Beispiel: Das Bild wiederholt sich in der Horizontalen.

html, body {
  background:url(bilder/html-kurs-logo.gif) repeat-x;
}

Hintergrundbild mit Wiederholung x:
https://www.html-seminar.de/beispielcode/css_bild_auf_hintergrund_mit_wiederholung_horizontal.htm

Und nun kommt der Kniff, für was man solche Hintergrundwiederholungen gebrauchen kann

1. Man nehme folgende Grafik einer Raufasertapete: https://www.html-seminar.de/bilder/hintergrund-raufaser.gif
2. lasse diese Grafik als Hintergrundbild horizontal wiederholen
3. Platziere die Steuerung in diesen Bereich
4. Platziere den Inhalt unterhalb
5. Fertig ist ein einfacher Internetauftritt

Und hier das fertige Beispiel - variieren Sie die Fenstergröße

Hintergrundbild komplett auf 100%

Wenn nun ein Hintergrundbild komplett angezeigt werden soll und automatisch in der Größe variiert (man möchte immer das ganze Bild sehen) gibt es auch dafür einen Kniff - das aber nur als Beispiel - in Quellcode sehen und selber erarbeiten :)

100% Hintergrundbild

Hintergrund für andere Elemente

Anderen Elementen kann auch über die Auszeichnung "background:url(bilder/...)" ein Hintergrundbild zugewiesen werden.

Beispielsweise einer Tabelle - Beispiel in extra Fenster (variieren Sie die Fensterbreite!)

table {
  width:80%;
  background: white url(seifenstuecke.jpg) no-repeat scroll;
  margin:0pt auto;
}

Beispiel „Tabelle mit Hintergrundbild“ unter:
https://www.html-seminar.de/beispielcode/css_bild_hintergrund_tabelle.htm