kurz & gut:
Bilder können präzise auf einer Seite mit CSS ausgerichtet werden. Hintergrundbilder finden teilweise als Designelemente Verwendung - auf den ersten Blick nicht als Bild zu erkennen.

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 der Größe, Ausrichtung, Randabstände und Randdarstellung.

Im HTML-Code kann das Bild eine ID bekommen, 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 und dass der Text das Bild umfließt.

<style type="text/css">
<!--
#rechts {
    float:right;
    width:234px;
    height:123px;
    padding-right:30;
    border:1px solid red;
} 
-->
</style>
  
<img id="rechts" src="bilder/html-kurs-logo.gif" />
Hier kommt Text, der das Bild links umfließt und automatisch umgebrochen wird

Ergenis im Browser

Logo HTML Seminar

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

Für eine bessere Darstellung der Bildgröße, erhält das Bild einen roten Rahmen.

Hintergrundbilder - wie das Bild in den Hintergrund kommt

Um das Bild in den Hintergrund zu packen, gibt es mehrere Möglichkeiten. Die weit verbreitest Möglichkeit ist, es in der CSS-Datei einen Bereich zu Definieren, der für das komplette HTML-Dokument gilt - also der 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 installiert, dann soll eine Arial und notfalls einfach eine Schrift ohne Serifen verwendet 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, Verdana, Helvetica, sans-serif;
  color: #ff0000;
}

Hintergrundbild mit Wiederholung X/Y

Beispiel: Das Bild wird nun links oben (left 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

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

  1. Man nehme folgende Grafik einer Raufasertapete: http://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 eine 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 uns 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%;
  height:70%;
  background:#ffffff url(../photo/seifenstuecke-hell.jpg) no-repeat scroll ;
  margin:0pt auto;
}

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

vorheriges Kapitel: Block- u. Inline-Elemente
nächstes Kapitel: CSS-Befehle Übersicht
Block- u. Inline-ElementeSeitenanfangCSS-Befehle Übersicht
eBook HTML-Seminar.de
del.icio.usMister Wong         Block- u. Inline-ElementeSeitenanfangCSS-Befehle Übersicht
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de