Proprietà background-size CSS

Corso raccomandato:

Definizione e uso background-size

Proprietà che definiscono la dimensione dell'immagine di sfondo.

Vedi anche:Sfondo CSSTutorial CSS:、

Sfondo CSS (Avanzato)Manuale HTML DOM:

Proprietà backgroundSize

Esempio

Definire la dimensione dell'immagine di sfondo:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;

}

Prova tu stesso

Syntaxo CSS Descrizionebackground-size:Impostare l'altezza e la larghezza dell'immagine di sfondo.|

|cover|contain;

Valore dell'attributo Valore Espandere l'immagine fino a raggiungere la dimensione massima, in modo che la larghezza e l'altezza si adattino completamente all'area del contenuto.
Descrizione

length

Impostare la larghezza e l'altezza dell'immagine di sfondo in percentuale rispetto all'elemento genitore.

Il primo valore imposta la larghezza, il secondo valore imposta l'altezza.

 Espandere l'immagine fino a raggiungere la dimensione massima, in modo che la larghezza e l'altezza si adattino completamente all'area del contenuto.
Impostare l'altezza e la larghezza dell'immagine di sfondo.

percentage

Impostare la larghezza e l'altezza dell'immagine di sfondo in percentuale rispetto all'elemento genitore.

Il primo valore imposta la larghezza, il secondo valore imposta l'altezza.

 Espandere l'immagine fino a raggiungere la dimensione massima, in modo che la larghezza e l'altezza si adattino completamente all'area del contenuto.
Se viene impostato solo un valore, il secondo valore viene impostato su "auto".

cover

Espandere l'immagine di sfondo abbastanza per coprire completamente l'area di sfondo.

 Espandere l'immagine fino a raggiungere la dimensione massima, in modo che la larghezza e l'altezza si adattino completamente all'area del contenuto.
Alcuni parti dell'immagine di sfondo potrebbero non essere visibili nell'area di posizionamento dello sfondo. contain Espandere l'immagine fino a raggiungere la dimensione massima, in modo che la larghezza e l'altezza si adattino completamente all'area del contenuto.

Test

Dettagli tecnici Valore predefinito:
auto Inheritance:
no Versione:
CSS3 JavaScript Syntax:object

.style.backgroundSize="60px 80px"

Più esempi
Espellare l'immagine di sfondo
Espellare l'immagine di sfondo per coprire interamente l'area del contenuto.
Espellare l'immagine di sfondo per farla coprire esattamente quattro volte orizzontalmente.

Supporto del browser

Le numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-