Pozadie - Triky CSS | Almanach CSS 2025

backgroundVlastnosť CSS umožňuje ovládať pozadí akéhokoľvek prvku (aké farby pod obsah tohto prvku). Je to skratková vlastnosť, čo znamená, že vám umožňuje napísať, čo by bolo viac vlastností CSS, do jednej. Páči sa ti to:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background sa skladá z ôsmich ďalších vlastností:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Môžete použiť ľubovoľnú kombináciu týchto vlastností, ktorá sa vám páči, takmer v akomkoľvek poradí (aj keď poradie odporúčané v špecifikácii je uvedené vyššie). Existuje však niečo: všetko, čo vo backgroundvlastnosti nezadáte, sa automaticky nastaví na predvolené hodnoty. Takže ak robíte niečo také:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Pozadie bude priehľadné namiesto červenej. Oprava je však ľahká: stačí definovať background-colorpo backgroundalebo len použiť skratku (napr. background: url(… ) red;)

Viacnásobné pozadia

CSS3 pridal podporu pre viac pozadí, ktoré sa vrstvia cez seba. Každá vlastnosť súvisiaca s pozadím môže mať zoznam oddelený čiarkami, napríklad takto:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Každá hodnota v zozname oddelenom čiarkami zodpovedá vrstve: prvá hodnota je horná vrstva, druhá hodnota je druhá vrstva a farba pozadia je vždy posledná vrstva.

Recepty

Prečítajte si pero emBzRd od Timothy Millera (@tjacobdesign) na serveri CodePen.

Podpora prehľadávača

Podpora sa medzi rôznymi špecifickými vlastnosťami líši a každý zodpovedajúci článok v Almanachu má jedinečné poznámky k podpore prehľadávača. Základné jednofarebné pozadie a jednotlivé obrázky však fungujú všade a všetko, čo nie je podporované, sa vráti k ďalšej najlepšej veci, či už ide o obrázok alebo farbu.