logo

Wie füge ich ein Hintergrundbild in CSS hinzu?

Der Hintergrundbild Die CSS-Eigenschaft wird verwendet, um ein Bild als Hintergrund eines Elements festzulegen. Mithilfe dieser CSS-Eigenschaft können wir ein oder mehrere Hintergrundbilder für ein Element festlegen.

Standardmäßig wird das Bild in der oberen linken Ecke eines Elements positioniert und sowohl horizontal als auch vertikal wiederholt. Das Hintergrundbild sollte passend zur Textfarbe gewählt werden. Eine schlechte Kombination aus Text und Hintergrundbild kann eine Ursache dafür sein, dass die Webseite schlecht gestaltet und nicht lesbar ist.

Der URL() Der Wert dieser Eigenschaft ermöglicht es uns, einen Dateipfad zu jedem Bild anzugeben. Es wird der Hintergrund des Elements angezeigt. Für den Hintergrund können wir mehrere Bilder oder eine Mischung aus Farbverläufen und Bildern verwenden. Wenn das Hintergrundbild nicht geladen werden kann oder wir Farbverläufe verwenden, diese aber im entsprechenden Browser nicht unterstützt werden, können wir den Fallback-Wert (den als Ersatz verwendeten Wert) als Hintergrundfarbe des Elements verwenden.

Java zu einem Array hinzufügen

Syntax

 background-image: url(); 

Werte

URL(): Es ist die URL zum Bild. Wir können die URLs durch ein Komma trennen, wenn wir mehr als ein Bild angeben möchten.

Prioritätswarteschlange C++

Beispiel

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Testen Sie es jetzt

Ausgabe

So fügen Sie ein Hintergrundbild in CSS hinzu

Beispiel

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Testen Sie es jetzt

Ausgabe

So fügen Sie ein Hintergrundbild in CSS hinzu

Beispiel

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 
Testen Sie es jetzt

Ausgabe

So fügen Sie ein Hintergrundbild in CSS hinzu