logo

Hur lägger man till bakgrundsbild i CSS?

De bakgrundsbild egenskap i CSS används för att ställa in en bild som bakgrund för ett element. Med den här CSS-egenskapen kan vi ställa in en eller flera bakgrundsbilder för ett element.

Som standard placeras bilden i det övre vänstra hörnet av ett element och upprepas både horisontellt och vertikalt. Bakgrundsbilden ska väljas efter textfärgen. Den dåliga kombinationen av text och bakgrundsbild kan vara en orsak till dåligt utformad och oläsbar webbsida.

De url() värdet på den här egenskapen tillåter oss att inkludera en filsökväg till vilken bild som helst. Det kommer att visa elementets bakgrund. Vi kan använda flera bilder eller en blandning av gradienter och bilder för bakgrunden. Om bakgrundsbilden inte kan laddas eller om vi använder gradienter, men de inte stöds i motsvarande webbläsare då, kan vi använda reservvärdet (värdet som används som ersättning) som bakgrundsfärg för elementet.

bfs vs dfs

Syntax

 background-image: url(); 

Värderingar

url(): Det är URL:en till bilden. Vi kan separera webbadresserna med ett kommatecken om vi vill ange mer än en bild.

array sortera java

Exempel

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

Produktion

Hur man lägger till bakgrundsbild i CSS

Exempel

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

Produktion

Hur man lägger till bakgrundsbild i CSS

Exempel

 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'); } 
Testa det nu

Produktion

Hur man lägger till bakgrundsbild i CSS