Background-repeat

CSS vlastnost background-repeat určuje opakování obrázkového pozadí. Respektive neopakování pozadí.

background-repeat
hodnoty způsob opakování pozadí
repeat pozadí se opakuje, až vyplní celý prostor prvku
no-repeat pozadí se neopakuje, vykreslí se pouze jednou
repeat-x pozadí se opakuje v ose x, tj. horizontálně; na výšku se vykreslí jednou
repeat-y pozadí se opakuje v ose y, tj. vertikálně; na šířku se vykreslí jen jednou
round pozadí se opakuje a každé opakování se rozšiřuje tak, aby se do prvku vešlel vždy celý počet obrázků
space pozadí se opakuje tak, aby se do prvku vešel celý počet obrázků a zbývající prostor mezi opakovanými obrázky se nechá bez pozadí
hodnotaX hodnotaY zápis dvou hodnot za sebou se interpretuje tak, že první hodnota je pro horizontální opakování, druhá hodnota pro vertikální opakování

Prvek musí mít deklarovanou vlastnost background-image, jinak background-repeat nemá smysl. Oblasti, kam neopakované pozadí nezbude, budou mít na pozadí barvu nastavenou přes background-color.

Hodnota repeat je výchozí, nemusí se nastavovat. Způsobí opakování pozadí, až se překryje celý prvek.

Background-repeat: round způsobí, že se obrázek na pozadí bude roztahovat tak, aby se do prvku vešel vžy celý počet pozadí. Pokud to nevychází, zaokrouhlí se rozměry obrázku (zaokrouhlit = angl. round) a obrázek se mírně zdeformuje tak, aby to vyšlo na celý počet opakování. Jakmile by se do zbylého prostoru vešlo další opakování obrázku, vloží se další opakování a rozšířené rozměry se nastaví na menší rozměry (přesnější matika je složitější a umožňuje obrázek i zmenšit). Podobně funguje vlastnost space, která místo deformování rozměrů mezi pozaďové obrázky rovnoměrně rozdělí plochu bez pozadí.

Pokud hledáte způsoby, jak pozadí vykreslit zdeformované, tj. v jiné velikosti, než má původně, ale bez opakování, použijte vlastnost background-size.

Podpora

Velmi dobře podporovaná vlastnost.

Podpora background-repeat
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze  
Firefox všechny verze  
Opera všechny verze  
Chrome ano  

V Mozille jsem našel nestandardní vlastnost -moz-background-inline-policy s hodnotami bounding-box, continous a each-box. Týkají se pozadí zalomených řádkových prvků a asi to nebude zas tak moc užitečné.

Příklady

Dejme tomu, že mám docela velký div (400x200) a v něm menší obrázek (30x30) na pozadí:

<div class="velky">
 nějaký obsah
</div>

Pomocí class nastavím velikost divu a obrázek na pozadí:

<style>
.velky {width: 400px; height: 200px; background-image: url("pozadi.gif")}
</style>

Normálně se obrázek opakuje z levého horního rohu doleva i dolů, až vyplní celý prostor. Tomu odpovídá hodnota repeat:

<style>
.velky {width: 400px; height: 200px; background-image: url("pozadi.gif")}
.velky {background-repeat: repeat}
</style>

Kdybych chtěl, aby se mi obrázek opakoval pouze doleva, použiji hodnotu repeat-x:

.velky {background-repeat: repeat-x}

Kdybych chtěl obrázek opakovat jenom dolů:

.dolu {background-repeat: repeat-y}

Častá chyba: žádné hodnoty x-repeat nebo y-repeat neexistují! Správně je to repeat-x a repeat-y:

.rovne {background-repeat: x-repeat}
.dolu {background-repeat: y-repeat}

Pod malými prvky nebo meníčky se pozadí neopakuje:

.neopakovat {background-repeat: no-repeat}

Opět neexistuje nic jako repeat-no.

Kombinace umístění a opakování

Zajímavých efektů se dá dosáhnout kombinací opakování a umístění (background-repeat a background-position). Například pozadí vyskládané na středu prvku odshora dolů:

.shoraDoluStredem {background-image: url("pozadi.gif"); background-position: top center; background-repeat: repeat-y}

což se dá zapsat úsporněji pomocí vlastnosti background:

.shoraDoluStredem {background: url("pozadi.gif") top center repeat-y}

Podobně se dá udělat proužek pozadí podél pravého okraje:

.shoraPodelPraveho {background: url("pozadi.gif") top right repeat-y}

podél levého okraje je to normálně jenom repeat-y, pozici netřeba nastavovat.

Proužek doprava opakovaného pozadí podél spodního okraje prvku:

.podelSpodku {background: url("pozadi.gif") bottom left repeat-x}

Další příklady

Pozice pozadí, tabulka, pseudopozadí pozicováním

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.