Pozadí - Triky CSS | Almanach CSS 2025

backgroundVlastnost CSS umožňuje ovládat pozadí jakéhokoli prvku (jaké barvy pod obsah tohoto prvku). Jedná se o zkratkovou vlastnost, což znamená, že vám umožňuje napsat, jaké by byly více vlastností CSS v jednom. Takhle:

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 se skládá z osmi dalších vlastností:

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

Můžete použít libovolnou kombinaci těchto vlastností, která se vám líbí, téměř v jakémkoli pořadí (ačkoli pořadí doporučené ve specifikaci je výše). Existuje však gotcha: vše, co ve backgroundvlastnosti nezadáte, se automaticky nastaví na výchozí hodnotu. Takže pokud uděláte něco takového:

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

Pozadí bude průhledné, místo červené. Oprava je snadná: stačí definovat background-colorpo background, nebo jednoduše použít zkratku (např. background: url(… ) red;)

Více pozadí

CSS3 přidal podporu pro více pozadí, která se překrývají. Jakákoli vlastnost související s pozadím může mít seznam oddělený čárkami, například takto:

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

Každá hodnota v seznamu odděleném čárkami odpovídá vrstvě: první hodnota je horní vrstva, druhá hodnota je druhá vrstva a barva pozadí je vždy poslední vrstva.

Recepty

Podívejte se na pero emBzRd od Timothy Millera (@tjacobdesign) na CodePen.

Podpora prohlížeče

Podpora se liší mezi různými specifickými vlastnostmi a každý odpovídající článek v almanachu má jedinečné poznámky k podpoře prohlížeče. Základní jednobarevné pozadí a jednotlivé obrázky fungují všude a vše, co není podporováno, spadne zpět k další nejlepší věci, ať už je to obrázek nebo barva.