CSS

HTML

COMPONENTS

CODE HUB

CSS Hintergrundbild-Generator

Konfiguration

Bild-URL

Klasse

Vorschau

Code

ReadyTools Academy

Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.

Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯

Jetzt starten

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