Proprietà CSS di dimensione dello sfondo
Esempio
Specificare la dimensione di un'immagine di sfondo con "auto" e in pixel:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La background-size
proprietà specifica la dimensione delle immagini di sfondo.
Ci sono quattro diverse sintassi che puoi usare con questa proprietà: la sintassi della parola chiave ("auto", "cover" e "contiene"), la sintassi a un valore (imposta la larghezza dell'immagine (l'altezza diventa "auto"), il sintassi a due valori (primo valore: larghezza dell'immagine, secondo valore: altezza) e sintassi di sfondo multiplo (separata da virgola).
Valore di default: | auto |
---|---|
Ereditato: | no |
Animabile: | sì. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.backgroundSize="60px 120px" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Sintassi CSS
background-size: auto|length|cover|contain|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
auto | Default value. The background image is displayed in its original size | |
length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
contain | Resize the background image to make sure the image is fully visible | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Specificare la dimensione di un'immagine di sfondo con percentuale:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Esempio
Specificare la dimensione di un'immagine di sfondo con "copertina":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Esempio
Specificare la dimensione di un'immagine di sfondo con "contiene":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Esempio
Qui abbiamo due immagini di sfondo. Specifichiamo la dimensione della prima immagine di sfondo con "contiene" e della seconda immagine di sfondo con "copertina":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Esempio
Usa diverse proprietà di sfondo per creare un'immagine "eroe":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Pagine correlate
Tutorial CSS: sfondi CSS
Riferimento DOM HTML: proprietà backgroundSize