Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

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;
margin-left: 20px;
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.

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2014 Axel Pratzner • www.html-seminar.de • Stand 2.1.2014
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de