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