Come inserire una immagine di sfondo con il Css

Per inserire una immagine su una pagina web tramite css si ricorre all'uso dell'attributo background.

Faccio un esempio. Per visualizzare una immagine di cui si conosce l'indirizzo Url, è sufficiente dichiararla sul foglio di stile nel seguente modo:

#immagine {
background: transparent url(mia_immagine.jpg)
left no-repeat;
}

In queste due righe ho dichiarato il colore dello sfondo, settandolo su trasparente, l'indirizzo Url dell'immagine da usare come sfondo ( background ) e il suo allineamento a sinistra ( left ) senza ripetizioni ( no-repeat ).

Con la clausola no-repeat ho indicato al browser di non voler ripetere l'immagine. Quest'ultima deve essere visualizzata una sola volta.

no-repeat
l'immagine viene ripetuta una sola volta

Avrei anche potuto settare una ripetizione diversa. A volte è utile ripetere l'immagine soltanto in verticale. In questo caso la clausola da usare è repeat-y.

repeat-y
l'immagine viene ripetuta soltanto in verticale

Per definire la ripetizione orizzontale, invece, la clausola da utilizzare è repeat-x.

repeat-x
l'immagine viene ripetuta soltanto in orizzontale.

Un promemoria utile e rapido, per ricordarsi come gestire l'immagine di sfondo in un Div tramite il Css.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base
  1. Cos'è il CSS