back to top

CSS background-origin: definire l’area dell’elemento dove posizionare lo sfondo

Sempre relativamente alla gestione del background, CSS3 introduce la nuova proprietà background-origin. Grazie a questa nuova proprietà è possibile definire a quale area di un elemento posizionare l’immagine di sfondo. Questa proprietà è usata in combinazione con le proprietà background-image e background-position.

Con la proprietà background-origin, in altre parole, è possibile definire se la posizione dello sfondo debba essere relativa all’intera superficie del box con tanto di padding e bordo, al solo padding oppure alla sola area di contenuto.

I possibili valori che può assumere la proprietà background-origin, infatti, sono:

  • border-box – la posizione dello sfondo è relativa all’intera superficie del box, comprensiva di eventuale padding e bordo;
  • padding-box – la posizione dello sfondo è relativa all’intera superficie del box comprensiva di eventuale padding ma NON sul bordo;
  • content-box – la posizione dello sfondo è relativa alla sola superficie netta del box (quindi non saranno coinvolti eventuale padding e bordo).

Il valore di default è padding-box, in altre parole se non è specificato un altro valore per background-origin lo sfondo sarà posizionato relativamente all’area del padding.

E’ importante ricordare che la proprietà background-origin non può essere utilizzata se per l’elemento è settata la proprietà background-attachment con valore fixed.

Vediamo tre esempi per rendere evidente l’effetto prodotto dai tre possibili valori.

#esempio {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px dotted #000000;
  background-image: url('smile.gif');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-origin: border-box;
}

Si noti che, all’interno del nostro codice, la proprietà background-position è impostata come “0 0”, cioè l’immagine di sfondo è posizionata in alto a sinistra.

Vediamo ora il risultato del nostro codice:

esempio di background-origin con valore border-box

Proviamo ora a modificare il valore della proprietà background-origin in questo modo:

background-origin: padding-box;
esempio di background-origin con valore padding-box

Come potete notare nel precedente esempio la nostra immagine di sfondo (un emoticon) non ricomprende più lo spazio occupato dal bordo.

Per finire vediamo l’effetto ottenuto modificando la proprietà background-origin in questo modo:

background-origin: content-box;
esempio di background-origin con valore content-box

In quest’ultimo esempio l’immagine di sfondo non ricomprende nemmeno l’area del padding ma riguarda, unicamente, la superficie netta dei contenuti.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).