Vlastnost CSS background-repeat

❮ Předchozí Kompletní reference CSS další ❯

Příklad

Opakujte obrázek na pozadí pouze svisle:

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

Další příklady „Vyzkoušejte si to sami“ níže.

Definice a použití

Vlastnost background-repeatnastavuje, zda/jak se bude obrázek na pozadí opakovat.

Ve výchozím nastavení se obrázek na pozadí opakuje svisle i vodorovně.

Tip: Obrázek na pozadí je umístěn podle vlastnosti background-position . Není-li zadána žádná poloha pozadí, bude obrázek vždy umístěn v levém horním rohu prvku.

Výchozí hodnota:	opakovat
Zděděno:	Ne
Animovatelné:	Ne. Přečtěte si o tématu Animable
Verze:	CSS1
Syntaxe JavaScriptu:	objekt .style.backgroundRepeat="opakování-x"

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

Poznámka: IE8 a starší nepodporují více obrázků pozadí na jednom prvku.

Syntaxe CSS

Hodnoty vlastností

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Další příklady

Příklad

Opakujte obrázek na pozadí svisle i vodorovně (toto je výchozí):

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

Příklad

Opakujte obrázek na pozadí pouze vodorovně:

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

Příklad

Neopakujte obrázek na pozadí. Obrázek se zobrazí pouze jednou:

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

Příklad

Použití background-repeat: space a background-repeat: round:

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

Příklad

K vytvoření „hrdinského“ obrázku použijte různé vlastnosti pozadí:

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}