Skip to content

Background

Il “background” si riferisce allo sfondo della pagina web. Si può voler lasciare lo sfondo bianco di default, oppure impostare un colore o un'immagine come sfondo. Con le immagini è possibile specificare il modo in cui l'immagine si vede, se deve occupare tutta la pagina o deve essere con le sue dimensioni standard, ma ripetuta. Queste impostazioni sono molto simili a quelle che possiamo incontrare quando decidiamo di cambiare sfondo sul Desktop in un sistema operativo, sia esso Windows, Linux o Mac.

background-color

Permette di impostare un colore come sfondo. Segue le stesse regole della proprietà color che definisce, invece, il cosiddetto foreground-color, ovvero colore in primo piano, ad esempio quello di un testo. Il colore di sfondo quindi può essere definito con codifica rgb, hsl oppure attraverso il suo nome o codice in esadecimale.

Esempio: impostare il colore #93FF7D come sfondo del div:

<div style="background-color: #93FF7D">
</div>

background-image

Come dice il nome, consente di mettere un'immagine di sfondo. In particolare, si tratta del percorso in cui l'immagine risiede. A differenza dell'attributo src del tag img, in CSS il percorso di una risorsa è contenuto all'interno della parola chiave url.

Ad esempio se vogliamo impostare la seguente immagine come sfondo:

Supponendo che l'immagine si trovi nella cartella sfondi (all'esterno della cartella del sito), si chiami nome_immagine e abbia estensione jpg:

<div style="background-image: url(../sfondi/nome_immagine.jpg)">
</div>

Attraverso background-image, è anche possibile definire un colore di sfondo a gradiente. Gli stili disponibili sono:

  • linear-gradient: gradiente lineare. Si può definire da sinistra verso destra (to right), da destra verso sinistra (to left), dall'alto verso il basso (to bottom, valore di default) o diagonalmente, ad esempio verso l'angolo in basso a sinistra (to bottom left).
  • radial-gradient: gradiente a raggio
  • conic-gradient: gradiente che ruota attorno ad un punto centrale

<div style="background-image: linear-gradient(to right, #52ff72,#00e5ff, #1500ff);">
</div>


<div style="background-image: linear-gradient(#52ff72,#00e5ff, #1500ff)">
</div>


<div style="background-image: linear-gradient(to bottom right, #52ff72,#00e5ff, #1500ff);">
</div>


<div style="background-image: radial-gradient(#52ff72,#00e5ff, #1500ff);">
</div>


<div style="width: 100px; height: 100px; background-image: conic-gradient(#52ff72,#00e5ff, #1500ff);">
</div>

backround-repeat

Permette di ripetere l'immagine fino a coprire lo sfondo. Naturalmente, questa proprietà deve andare in coppia con il percorso che specifica dove trovare l'immagine, specificato da backround-image. background-repeat può assumere diversi valori.

Valore di default. L'immagine è ripetuta sia in orizzontale che in verticale.

<div style="background-image: url(../sfondi/nome_immagine.jpg);">
</div>

Ripete l'immagine solo lungo la x, ovvero orizzontalmente

<div style="background-image: url(../sfondi/nome_immagine.jpg); background-repeat: repeat-x">
</div>

Ripete l'immagine solo lungo la y, ovvero verticalmente

<div style="background-image: url(../sfondi/nome_immagine.jpg); background-repeat: repeat-y">
</div>

L'immagine non è ripetuta

<div style="background-image: url(../sfondi/nome_immagine.jpg); background-repeat: no-repeat">
</div>

backround-size

Modifica la dimensione dell'immagine di sfondo. Si possono impostare i valori esatti o in percentuale rispetto all'elemento contenitore della larghezza e dell'altezza. Inoltre, è possibile ridimensionare l'immagine per far sì che copra l'intero contenitore o che sia mostrata nella sua interezza.

<div style="background-image: url(../sfondi/nome_immagine.jpg); background-repeat: no-repeat; background-size: 120px 120px;">
</div>

Ridimensiona l'immagine per far sì che sia completamente visibile

<div style="background-image: url(../sfondi/nome_immagine.jpg); background-repeat: no-repeat; background-size: contain;">
</div>

Copre l'elemento contenitore

<div style="background-image: url(../sfondi/nome_immagine.jpg); background-repeat: no-repeat; background-size: cover;">
</div>