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

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
- Man nehme folgende Grafik einer Raufasertapete: https://www.html-seminar.de/bilder/hintergrund-raufaser.gif
- lasse diese Grafik als Hintergrundbild horizontal wiederholen
- Platziere die Steuerung in diesen Bereich
- Platziere den Inhalt unterhalb
- 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 :)
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 :).
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.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-