CSS vlastnosti

background-repeat

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

HodnotyPopis
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;
}

 

CSS na fóru

  • Nejsou žádné příspěvky k zobrazení.

Podpořte tento projekt

V případě, že se Vám tyto stránky líbí a nelezli jste zde informace, které jste potřebovali, přispějte prosím jakoukoliv částkou. Děkujeme!



Přihlášení