logo

Jak přidat obrázek na pozadí v CSS?

The obrázek na pozadí vlastnost v CSS se používá k nastavení obrázku jako pozadí prvku. Pomocí této vlastnosti CSS můžeme nastavit jeden nebo více obrázků na pozadí pro prvek.

Ve výchozím nastavení je obrázek umístěn v levém horním rohu prvku a opakuje se vodorovně i svisle. Obrázek na pozadí by měl být zvolen podle barvy textu. Špatná kombinace textu a obrázku na pozadí může být příčinou špatně navržené a nečitelné webové stránky.

The url() hodnota této vlastnosti nám umožňuje zahrnout cestu k libovolnému obrázku. Zobrazí pozadí prvku. Na pozadí můžeme použít více obrázků nebo směs přechodů a obrázků. Pokud se nepodaří načíst obrázek pozadí nebo pokud používáme přechody, ale nejsou podporovány v odpovídajícím prohlížeči, můžeme jako barvu pozadí prvku použít záložní hodnotu (hodnota použitá jako náhrada).

Sree Ramanujan

Syntax

 background-image: url(); 

Hodnoty

url(): Je to adresa URL obrázku. Pokud chceme zadat více než jeden obrázek, můžeme adresy URL oddělit čárkou.

pružinové moduly

Příklad

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Otestujte to hned

Výstup

Jak přidat obrázek na pozadí v CSS

Příklad

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Otestujte to hned

Výstup

Jak přidat obrázek na pozadí v CSS

Příklad

 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'); } 
Otestujte to hned

Výstup

Jak přidat obrázek na pozadí v CSS