English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La dimensione dell'immagine di sfondo specificata dall'attributo background-size CSS.
La tabella seguente riassume l'uso contestuale e la cronologia delle versioni di questo attributo.
| Valore predefinito: | auto auto |
|---|---|
| Applicabile a: | Tutti gli elementi |
| Ereditarietà: | No |
| Animabile: | Sì.Riferimento: Proprietà animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | object object.style.backgroundSize="60px 80px" |
La sintassi di questo attributo è la seguente:
background-size: length | percentage | auto | cover | contain | initial | inherit
Il seguente esempio dimostra come utilizzare la proprietà background-size.
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
}Prova a vedere‹/›Suggerimento:L'attributo background-size viene spesso utilizzato per creare immagini di sfondo a piena dimensione, che vengono scalate in base alla dimensione del viewport o alla larghezza del browser.
La tabella seguente descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| length | Imposta la larghezza e l'altezza dell'immagine di sfondo come lunghezze specificate. Il primo valore imposta la larghezza, il secondo valore imposta l'altezza. Se viene specificato solo un valore, il secondo valore è impostato su auto per default. Non sono ammessi valori negativi di lunghezza. |
| percentage | Imposta la larghezza e l'altezza dell'immagine di sfondo come percentuale dell'area di posizionamento dello sfondo. Il primo valore imposta la larghezza, il secondo valore imposta l'altezza. Se viene specificato solo un valore, il secondo valore è impostato su auto per default. Non sono ammessi valori percentuali negativi. |
| auto | Un auto per un valore dimensionale di allineamento su una direzione specifica dell'immagine di sfondo, mantenendo la proporzioni originale. Se entrambe le dimensioni sono specificate, l'immagine di sfondo conterrà la sua propria larghezza e altezza, che è il comportamento predefinito. |
| cover | Scala l'immagine al minimo mantenendo le proporzioni originali (se presenti), in modo che larghezza e altezza coprano completamente l'area di posizionamento dello sfondo. |
| contain | Scala l'immagine mantenendo le proporzioni originali (se presenti), per dimensioni massime, in modo che larghezza e altezza si adattino all'area di posizionamento dello sfondo. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore calcolato dell'attributo background-size del suo elemento padre. |
Compatibilità dei browser per l'attributo background-size, tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:CSS sfondo,CSS3 sfondo.
Proprietà correlate:background,background-attachment,background-color,background-image,background-clip,background-position,background-repeat,background-origin.