Esempio
Come posizionare un background-image:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà background posizioni imposta la posizione iniziale di un'immagine di sfondo.
Tip: per impostazione predefinita, uno sfondo-immagine viene posizionata nell'angolo in alto a sinistra di un elemento, e ripete sia verticalmente che orizzontalmente.
| Valore di default: | 0% 0% |
|---|---|
| Inherited: | no |
| animatable: | yes. Read about animatable Try it |
| Versione: | CSS1 |
| sintassi JavaScript: | object .style.backgroundPosition="center" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 e precedenti non supportano più immagini di sfondo su un elemento.
CSS Sintassi
background-position:value;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Se si specifica una sola parola chiave, l'altro valore sarà "center" | Gioca " |
| x% y% | Il primo valore rappresenta la posizione orizzontale ed il secondo valore è verticale. L'angolo in alto a sinistra è 0% 0%. L'angolo in basso a destra è al 100% al 100%. Se si specifica un solo valore, l'altro valore sarà pari al 50%. . Il valore di default è: 0% 0% | Gioca " |
| xpos ypos | Il primo valore rappresenta la posizione orizzontale ed il secondo valore è verticale. L'angolo in alto a sinistra è 0 a 0. Le unità possono essere pixel (0px 0px) o qualsiasi altra unità CSS . Se si specifica un solo valore, l'altro valore sarà pari al 50%. È possibile combinare% e posizioni | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Come posizionare un background-image utilizzando per cento:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Prova tu stesso " Esempio
Come posizionare un background-image utilizzando pixel:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Prova tu stesso " Pagine correlate
CSS tutorial: Sfondo CSS
Riferimento CSS: background-image property
Di riferimento HTML DOM: backgroundPosition property