Le proprietà del backgruond sono definite tramite i CSS per ottenere paricolari effetti sullo sfondo di un elemento. In particolare presteremo attenzione all’immagine si sfondo e alle sue caratteristiche.

Per assegnare una immagine di sfondo ad un elemento utilizzeremo la propriètà background-image, a questa proprietà possono essere assegnati 3 valori:

• url(‘URL’): l’indirizzo dell’immagine da utilizzare come sfondo
• none: valore di default, nessuno sfondo assegnato
• inherit: lo sfondo viene erditato dall’elemento che contiene l’elemento a cui stiamo assegnando proprietà

Se utilizziamo una immagine come sfondo di default viene affiancata sia verticalmente che orizzontalmente, mediante la proprietà background-repeat possiamo agire su questo tipo di visualizzazione, i valori a disposizione sono i seguenti:

• repeat: è il valore di default, l’immagine e affiancata sia verticalmente che orizzontalmente
• repeat-x: il background viene ripetuto orizzontalmente
• repeat-y: il background viene ripetuto verticalmente
• no-repeat: nessuna ripetizione, l’immagine sarà visualizzata una volta sola
• inherit: caratteristica erditata dall’elemento padre

Se utilizziamo un background-repeat diverso da repeat, potrebbe essere utile definire la posizione dello sfondo risptetto all’elemento che stiamo trattando, per far qusto possiamo utilizzare la proprietà background-position:

• left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom: definisce la posizione orizzontale e verticale dell’immagine, se mettiamo solo quella orizzontale, atuomaticamente la verticale avrà valore center
• xpos ypos: in questo modo specifichiamo le coordinate dell’immagine, il primo valore rappresenta la distanza dal bordo sinistro, mentre il secondo rappresenta la distanza dal bordo superiore. L’angolo in altro a sinistra ha cooridinate 0 0. Possiamo utilizzare tutte le unità di misura dei css. E’ possibile mischiare valori percentuali e posizioni.
• x% y%: specifichiamo la distanza dai bordi utilizzando valori percentuali, il primo valore è la distanza da sinistra, il secondo da destra. L’angolo in alto a sinistra (nonchè valore di default) è 0% 0%. L’angolo in basso a destra è 100% 100%. E’ possibile mischiare valori percentuali e posizioni.
• inherit: caratteristica erditata dall’elemento padre

Un’altra proprietà che potrebbe interessarci è background-attachment, questa proprietà ci consente di gestire lo scrolling dell’immagine. Può assumere tre valori:

• scroll: Valore di default, l’immagine scrolla
• fixed: l’immagine resta in posizione fissa anche se scrolliamo
• inherit: caratteristica erditata dall’elemento padre