CSS agtergrond-herhaal Eiendom

❮ Vorige Voltooi CSS- verwysing Volgende ❯

Voorbeeld

Herhaal 'n agtergrondprent slegs vertikaal:

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

Meer "Probeer dit self" voorbeelde hieronder.

Definisie en gebruik

Die background-repeateienskap stel of/hoe 'n agtergrondprent herhaal sal word.

By verstek word 'n agtergrondprent beide vertikaal en horisontaal herhaal.

Wenk: Die agtergrondprent word volgens die agtergrondposisie- eienskap geplaas. As geen agtergrondposisie gespesifiseer is nie, word die prent altyd in die element se boonste linkerhoek geplaas.

Standaard waarde:	herhaal
Geërf:	geen
Animateerbaar:	geen. Lees oor animeerbaar
Weergawe:	CSS1
JavaScript-sintaksis:	voorwerp .style.backgroundRepeat="repeat-x"

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

Let wel: IE8 en vroeër ondersteun nie veelvuldige agtergrondprente op een element nie.

CSS-sintaksis

Eiendomswaardes

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

Meer voorbeelde

Voorbeeld

Herhaal 'n agtergrondprent beide vertikaal en horisontaal (dit is verstek):

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

Voorbeeld

Herhaal 'n agtergrondprent slegs horisontaal:

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

Voorbeeld

Moenie 'n agtergrondprent herhaal nie. Die prent sal net een keer gewys word:

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

Voorbeeld

Gebruik agtergrond-herhaal: spasie en agtergrond-herhaal: rond:

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

Voorbeeld

Gebruik verskillende agtergrondeienskappe om 'n "held"-beeld te skep:

.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 */
}