Background-repeat
CSS vlastnost background-repeat určuje opakování obrázkového pozadí. Respektive neopakování pozadí.
| 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.
| 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
