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í.

color

CSS vlastnost color definuje barvu textu (písma) daného elementu. Pokud barva písma není definována, záleží na...

float

CSS vlastnost float definuje obtékání HTML elementů. Daný prvek je "vyjmut" z toku textu a stává se z něj blokový...

height

CSS vlastnost height definuje výšku HTML elementu. Výška nezahrnuje padding, border nebo margin.

width

CSS vlastnost width definuje šířku HTML elementu. Výška nezahrnuje padding, border nebo margin.

align-content

CSS vlastnost align-content zarovná flexibilní HTML elementy podle vedlejší osy (tzn. osy kolmé na osu hlavní) pokud...

  • 1
  • 2
  • 3

Přihlášení