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;
}
Připojení na Twitter
