Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

CSS: l’immagine di background

Scritto da Fare-internet il 26 ottobre 2010 condividi condividi

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

Twitter