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

Prvek musí mít deklarovanou vlastnost background-image, jinak to nemá smysl. Oblasti, kam neopakované pozadí nezbude, budou mít na pozadí barvu.

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

Neexistuje (pokud vím) žádný způsob, jak pozadí vykreslit zdeformované, tj. v jiné velikosti, než má původně (to např. u obrázků <img> jde zadáním jiných rozměrů).

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.