CSS
HTML
COMPONENTS
CODE HUB
CSS Hintergrundbild-Generator
Konfiguration
Bild-URL
Klasse
Vorschau
Code
Coden lernen mit Lara
Meistere Programmierkonzepte Schritt für Schritt mit deinem interaktiven KI-Tutor. Lara erklärt komplexe Logik, überprüft deine Praxisübungen und hilft dir, ein solides Fundament in der Softwareentwicklung aufzubauen.
Interaktive Programmierlektionen, angepasst an dein eigenes Tempo.
Jetzt lernen mit Lara startenCSS Hintergrundbild-Generator
In CSS können Sie ein Hintergrundbild für HTML-Elemente mit der Eigenschaft background-image festlegen. Diese Eigenschaft ermöglicht es, eine Bilddatei als Hintergrund eines Elements zu verwenden.
So verwenden Sie die Eigenschaft background-image in CSS:
.background-image-element {
background-image: url('image.jpg');
}
In diesem Beispiel:
- Die Klasse .background-image-element setzt ein Hintergrundbild für das Element.
- url('image.jpg') gibt die URL des gewünschten Hintergrundbildes an. Ersetzen Sie image.jpg durch den tatsächlichen Pfad zu Ihrer Bilddatei.
Sie können auch andere Eigenschaften angeben, um das Verhalten des Hintergrundbildes zu steuern, wie background-repeat, background-size und background-position.
.background-image-element {
background-image: url('image.jpg');
background-repeat: repeat;
background-size: cover;
background-position: center;
}
In diesem Beispiel:
- background-repeat: repeat; bedeutet, dass das Bild sowohl horizontal als auch vertikal wiederholt wird.
- background-size: cover; sorgt dafür, dass das Hintergrundbild das gesamte Element ohne Verzerrung abdeckt.
- background-position: center; positioniert das Hintergrundbild zentriert innerhalb des Elements.
Die Eigenschaft background-image ist vielseitig einsetzbar und kann verwendet werden, um ansprechende und individuelle Hintergründe für verschiedene HTML-Elemente auf Ihrer Website zu gestalten.