CSS / Background-Image
background-image ist eine CSS-Eigenschaft, mit der du einem
HTML-Element ein Hintergrundbild zuweist. Das Bild liegt dabei hinter
dem Inhalt des Elements und wird über eine URL eingebunden.
Typisch sieht das so aus:
Wichtig ist der Pfad zur Bilddatei, und zwar relativ zu deiner CSS-Datei oder als absolute Adresse.
Wichtige Begleiteigenschaften:
background-image nutzt man, wenn ein Bild als Dekoration oder Layout-Hintergrund dienen soll. Wenn das Bild inhaltlich wichtig ist, sollte es eher im HTML stehen, nicht nur als Hintergrund.
Aber es gibt noch viel mehr. Doch seht selbst.
Wenn Ihr Anregungen oder Kommentare habt, seit so nett und kontaktiert mich unter: Kontakt
Typisch sieht das so aus:
.box {
background-image:url("bild.jpg");
}
Wichtige Begleiteigenschaften:
- background-repeat: steuert, ob und wie oft das Bild wiederholt wird, z. B. repeat, repeat-x, repeat-y oder no-repeat.
- background-position: legt fest, wo das Bild im Element sitzt, etwa links oben, mittig oder mit Prozentwerten.
- background-size: bestimmt die Größe des Bildes.
- background-attachment: regelt, ob das Bild beim Scrollen mitläuft oder fixiert bleibt.
background-image nutzt man, wenn ein Bild als Dekoration oder Layout-Hintergrund dienen soll. Wenn das Bild inhaltlich wichtig ist, sollte es eher im HTML stehen, nicht nur als Hintergrund.
Aber es gibt noch viel mehr. Doch seht selbst.
Wenn Ihr Anregungen oder Kommentare habt, seit so nett und kontaktiert mich unter: Kontakt