CSS vlastnost background-repeat určuje opakování obrázkového 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 |
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ů).
Velmi dobře podporovaná vlastnost.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 5, 5.5, 6 | ||
| Internet Explorer 4 | chybně | pokud je nastavena background-position, opakuje IE 4 pozadí pouze doprava a dolů (Pixy) |
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ano |
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 {widht: 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 {widht: 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.
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}
Pozice pozadí, tabulka, pseudopozadí pozicováním
Background = pozadí, Background-image = obrázek na pozadí, Background-position = umístění pozadí.
Pozadí -- Vše o pozadí stránky a objektů v HTML a CSS
o tvorbě, údržbě a zlepšování internetových stránek