Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen – Webdesign erstellen » Bilder und Hintergrund

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 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

Bild rechts platziert und Text umfließt es

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details