--- title: background-repeat slug: Web/CSS/background-repeat translation_of: Web/CSS/background-repeat ---
background-repeat specifica se e come lo sfondo deve essere ripetuto.
visual background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
<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>
/* 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.mozilla.org/static/img/favicon32.png);
background-repeat: repeat-x,
repeat-y;
height: 144px;
}
In this example, each list item is matched with a different value of background-repeat.
{{EmbedLiveSample('Esempi', 240, 360)}}
| Browser |
Versione più vecchia |
|---|---|
| Internet Explorer | 4 |
| Firefox | 1 |
| Netscape | 4 |
| Opera | 3.5 |
background , background-attachment , background-color , background-image , background-position , background-repeat