Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.
Sommario
background-repeat specifica se e come lo sfondo deve essere ripetuto.
- Valore iniziale : repeat
- Si applica a: tutti gli elementi
- Ereditabile : no
- Percentuali: no
- Media:
visual - Valore riconosciuto : come specificato
Sintassi
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
Valori
- repeat
- L'immagine viene ripetuta sia orizzontalmente che verticalmente
- repeat-x
- L'immagine viene ripetuta solo orizzontalmente
- repeat-y
- L'immagine viene ripetuta solo verticalmente
- no-repeat
- L'immagine non viene ripetuta: viene visualizzata una sola volta.
Esempi
HTML
<ol>
<li>no-repeat
<div class="one"> </div>
</li>
<li>repeat
<div class="two"> </div>
</li>
<li>repeat-x
<div class="three"> </div>
</li>
<li>repeat-y
<div class="four"> </div>
</li>
<li>repeat-x, repeat-y (multiple images)
<div class="five"> </div>
</li>
</ol>
CSS
/* Shared for all DIVS in example */
li {margin-bottom: 12px;}
div {
background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
width: 144px;
height: 84px;
}
/* background repeat CSS */
.one {
background-repeat: no-repeat;
}
.two {
background-repeat: repeat;
}
.three {
background-repeat: repeat-x;
}
.four {
background-repeat: repeat-y;
}
/* Multiple images */
.five {
background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
background-repeat: repeat-x,
repeat-y;
height: 144px;
}
Result
In this example, each list item is matched with a different value of background-repeat.
Compatibilità tra browser
| Browser |
Versione più vecchia |
|---|---|
| Internet Explorer | 4 |
| Firefox | 1 |
| Netscape | 4 |
| Opera | 3.5 |
Vedere anche
background , background-attachment , background-color , background-image , background-position , background-repeat
Tag del documento e collaboratori
Ultima modifica di:
SphinxKnight,