CSS background-repeat
La proprietà CSS background-repeat controlla la ripetizione dello sfondo
La proprietà background-repeat definisce come l'immagine di sfondo deve essere ripetuta all'interno dell'elemento. Può essere impostata su repeat per ripetere l'immagine sia orizzontalmente che verticalmente, su no-repeat per non ripeterla affatto, oppure su repeat-x o repeat-y per ripeterla solo lungo un asse (orizzontale o verticale).
Sintassi
Significato dei valori principali:
-
repeat: l'immagine di sfondo viene ripetuta sia orizzontalmente che verticalmente fino a coprire completamente l'area dell'elemento.
-
no-repeat: l'immagine di sfondo non viene ripetuta, e verrà visualizzata solo una volta.
-
repeat-x: l'immagine di sfondo viene ripetuta solo orizzontalmente (sul lato x).
-
repeat-y: l'immagine di sfondo viene ripetuta solo verticalmente (sul lato y).
Esempio proprietà: background-repeat
Codice Esempio: background-repeat
.background-repeat-example {
background-image: url('https://example.com/image.jpg');
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: background-repeat
Esempio di utilizzo di background-repeat
In questo esempio, la proprietà background-repeat è impostata per non ripetere l'immagine di sfondo:
CSS e HTML per l'elemento con sfondo senza ripetizione:
<style>
.background-repeat-example {
width: 400px;
height: 250px;
background-color: #19bd13; /* Colore di sfondo verde */
background-image: url('https://example.com/image.jpg');
background-repeat: no-repeat; /* L'immagine non si ripete */
background-position: center; /* Centra l'immagine */
border: 10px solid red;
padding: 50px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="background-repeat-example">
Sfondo senza ripetizione
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
