CSS vlastnosti
background-repeat
- Zobrazeno: 820
Definice a použití
Vlastnost background-repeat nastaví, zda/jak bude obrázek pozadí opakován.
CSS Syntaxe
background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit
Hodnoty | Popis |
---|---|
repeat | obrázek pozadí se opakuje vertikálně i horizontálně, poslední obrázek bude oříznut, pokud se nevejde (výchozí nastavení) |
repeat-x | obrázek pozadí se opakuje pouze horizontálně |
repeat-y | obrázek pozadí se opakuje pouze vertikálně |
no-repeat | obrázek pozadí se neopakuje, zobrazí se pouze jednou |
space | obrázek pozadí se opakuje co nejvíce bez oříznutí, první a poslední obrázky jsou připnuty na obě strany elementu a mezery jsou rovnoměrně rozděleny mezi obrazy |
round | obrázek pozadí se opakuje a squished nebo protáhnutím vyplní prostor (bez mezer) |
initial | nastaví tuto vlastnost zpět na její výchozí hodnotu |
inherit | zdědí tuto vlastnost od jeho rodičovského elementu |
Ukázka použití
Opakujte obrázek na pozadí vertikálně i horizontálně (toto je výchozí nastavení):
CSS:
body {
background-image: url("obrazek.png");
background-repeat: repeat;
}
Opakujte obrázek na pozadí pouze horizontálně:
CSS:
body {
background-image: url("obrazek.png");
background-repeat: repeat-x;
}
Neopakujte obrázek na pozadí. Obrázek bude zobrazen pouze jednou:
CSS:
body {
background-image: url("obrazek.png");
background-repeat: no-repeat;
}
Použití background-repeat: space a background-repeat: round:
CSS:
#example1 { border: 2px solid black; padding: 25px; background: url("obrazek.gif"); background-repeat: space; } #example2 { border: 1px solid black; padding: 25px; background: url("obrazek.gif"); background-repeat: round; }