logo

Hoe voeg ik een achtergrondafbeelding toe in CSS?

De achtergrond afbeelding eigenschap in CSS wordt gebruikt om een ​​afbeelding in te stellen als achtergrond van een element. Met behulp van deze CSS-eigenschap kunnen we een of meer achtergrondafbeeldingen voor een element instellen.

Standaard wordt de afbeelding in de linkerbovenhoek van een element geplaatst en zowel horizontaal als verticaal herhaald. De achtergrondafbeelding moet worden gekozen op basis van de tekstkleur. De slechte combinatie van tekst en achtergrondafbeelding kan een oorzaak zijn van een slecht ontworpen en onleesbare webpagina.

De url() Door de waarde van deze eigenschap kunnen we een bestandspad naar elke afbeelding opnemen. Het toont de achtergrond van het element. We kunnen meerdere afbeeldingen of een combinatie van verlopen en afbeeldingen voor de achtergrond gebruiken. Als de achtergrondafbeelding niet kan worden geladen of als we de verlopen gebruiken, maar deze niet worden ondersteund in de overeenkomstige browser, kunnen we de fallback-waarde (de waarde die wordt gebruikt als vervanging) gebruiken als de achtergrondkleur van het element.

Linux-foutcodes

Syntaxis

 background-image: url(); 

Waarden

url(): Het is de URL naar de afbeelding. We kunnen de URL's scheiden door een komma als we meer dan één afbeelding willen opgeven.

c programmeervoorbeeldprogramma's

Voorbeeld

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Test het nu

Uitvoer

Hoe achtergrondafbeelding toe te voegen in CSS

Voorbeeld

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Test het nu

Uitvoer

Hoe achtergrondafbeelding toe te voegen in CSS

Voorbeeld

 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'); } 
Test het nu

Uitvoer

Hoe achtergrondafbeelding toe te voegen in CSS