Immagini di background in CSS - con esempi di codice HTML

Articolo originale: CSS Background Image – With HTML Example Code

Quello che un utente vede in un sito web ha un impatto sulla qualità della sua esperienza. Questo influenza anche la facilità con cui gli utenti possono interagire con l'intero sito in generale.

Aggiungere immagini allo sfondo di certe parti di un sito è spesso più attraente e interessante dal punto di vista visivo che cambiare meramente il colore di sfondo.

I browser moderni supportano una varietà di file di immagine come .jpg, .png, .gif e.svg.

Questo articolo spiega come aggiungere immagini al tuo codice HTML e come raffinarle per migliorarne l'aspetto.

Sintassi delle immagini di background

Il primo passo è assicurarsi di creare una cartella per contenere le immagini che vuoi usare nel tuo progetto.

Per esempio possiamo creare una cartella images nel progetto su cui stiamo lavorando ed aggiungere un'immagine chiamata sunset.png che vogliamo usare.

La proprietà CSS background-image ti permette di posizionare l'immagine dietro all'elemento HTML che desideri.

Potrebbe essere l'intera pagina (utilizzando il selettore CSS body che seleziona l'elemento <body> del nostro HTML), oppure solo una specifica parte della pagina come un elemento section, come nell'esempio sotto.

Per aggiungere un'immagine di sfondo a un elemento section nel tuo file .css, scrivi il seguente codice:

section {
  background-image: url("images/sunset.png");
}

Vediamo cosa succede nel dettaglio:

section specifica l'elemento a cui vuoi applicare l'immagine.
url() è utilizzato per dire al CSS dove si trova l'immagine che vuoi utilizzare.
All'interno delle parentesi, "images/sunset.png" è il percorso all'immagine. Questo fa sapere al browser quale URL considerare.
Il percorso in questo esempio è definito un percorso relativo: l'immagine a cui si riferisce è un file locale, relativo al nostro progetto ed alla nostra cartella di lavoro corrente, non è un indirizzo web. Per aggiungere un'immagine possiamo usare anche un percorso assoluto, che è un indirizzo web completo e inizia con un dominio URL (http://www.).
Usare le virgolette è una buona abitudine, ma possiamo ometterle, per cui background-image: url(images/sunset.png) funziona ugualmente.
Non dimenticare il punto e virgola!

Come evitare la ripetizione del background

Quando applichi un'immagine di sfondo a un elemento, questa viene ripetuta di default.

Se l'immagine è più piccola dell'elemento di cui è lo sfondo, essa si ripeterà in modo da riempirlo.

Come possiamo evitare che ciò accada?

La proprietà background-repeat necessita di 4 valori e consente di cambiare la direzione in cui l'immagine si ripete oppure bloccare la ripetizione dell'immagine completamente.

section {
  background-repeat: repeat;
}

Questo è il valore di default se non forniamo alla proprietà background-repeat un valore. In questo caso, l'immagine viene ripetuta sia orizzontalmente che verticalmente, ovvero sia nella direzione x che nella direzione y, fino a riempire completamente lo spazio.

section {
  background-repeat: no-repeat;
}

Il valore no-repeat blocca la ripetizione dell'immagine in tutte le direzioni, facendo sì che venga mostrata solo una volta.

section {
  background-repeat: repeat-x;
}

Questo valore ripete l'immagine solo orizzontalmente nella pagina. L'immagine viene ripetuta nella pagina nella direzione x. La direzione x in matematica è la direzione da sinistra a destra.

section {
  background-repeat: repeat-y;
}

Questo valore ripete l'immagine solo verticalmente nella pagina. L'immagine viene ripetuta nella pagina nella direzione y. La direzione y in matematica è la direzione dall'alto al basso.

Come impostare la posizione del background

Dopo aver aggiunto l'immagine di background e averne impedito la ripetizione, possiamo controllare ulteriormente come viene visualizzata nello sfondo dell'elemento migliorandone la posizione.

A questo scopo, utilizzeremo la proprietà background-position.

La proprietà necessita di due valori. Il si riferisce alla posizione orizzontale, o direzione x (distanza nel senso della larghezza del tag). Il secondo si riferisce alla posizione verticale, o direzione y (distanza nel senso dell'altezza del tag).

I valori possono essere unità come il pixel:

section {
  background-position: 20px 30px;
}

Questo sposterà l'immagine di 20px nel senso della larghezza e di 30px nel senso dell'altezza dell'elemento contenitore.

Invece dei pixel, possiamo usare un insieme di parole chiave come right, left, top, down, o center per posizionare l'immagine alla destra, sinistra, in alto, in basso o al centro dell'elemento.

section {
  background-position: right center;
}

Questo posiziona l'immagine sul lato destro del centro del tag.

Se vogliamo centrare l'immagine sia orizzontalmente che verticalmente, possiamo fare come nell'esempio seguente:

section {
  background-position: center center;
}

Per posizionare un'immagine con maggiore dettaglio, vale la pena menzionare l'uso delle percentuali:

section {
  background-position: 20% 40%;
}

Questo posiziona l'immagine al 20% nel senso della larghezza dell'elemento e al 40% nel senso dell'altezza dell'elemento.

Finora abbiamo visto valori usati in combinazione, ma possiamo anche specificare un singolo valore come background-position: 20px; o background-position: center; or background-position: 20%;, che viene applicato a entrambe le direzioni.

Come ridimensionare l'immagine di background

Pe controllare le dimensione dell'immagine di background possiamo usare la proprietà background-size.

Nuovamente, come nelle proprietà menzionate precedentemente, sono necessari due valori. Il primo per la dimensione orizzontale (x) ed il secondo per la dimensione verticale (y).

Possiamo usare i pixel, in questo modo:

section {
  background-size: 20px 40px;
  /* ridimensiona l'immagine a 20px di larghezza e 40px di altezza */
}

Se non conosciamo la larghezza esatta del contenitore in cui stiamo posizionando l'immagine, ci sono una serie di specifici valori che possiamo fornire alla proprietà.

background-size: cover; ridimensiona l'immagine di background in modo da coprire l'intero spazio dello sfondo dell'elemento indipendentemente dall'ampiezza dello stesso. Se l'immagine è troppo grande e ha una rapporto dimensionale più grande dell'elemento in cui è contenuta, essa verrà stirata e poi tagliata ai bordi.
background-size: contain; contiene l'immagine, come il nome suggerisce. Fa sì che l'intera immagine sia mostrata in background senza tagliare nessuna parte. Se l'immagine è molto più piccola dell'elemento, lo spazio rimasto vuoto verrà riempito con la ripetizione dell'immagine, così possiamo usare la regola background-repeat: no-repeat;, menzionata in precendenza.

Nell'immagine di seguito, la regola background-size:cover; in questo caso taglia parti dell'immagine.

Quando cambiamo la regola in background-size:contain; possiamo vedere che l'immagine si rimpicciolisce per adeguarsi alla dimensione del contenitore (in questo caso, section).

Come usare la proprietà background-attachment

Con la proprietà background-attachment possiamo controllare dove viene ancorata l'immagine di background , ovvero se l'immagine è fissa oppure no rispetto alla finestra del browser.

Il valore di default è background-attachment: scroll;, dove l'immagine di background resta solidale al suo elemento e segue il naturale flusso delle pagine dato dallo scorrimento verso l'alto e verso il basso.

Il secondo valore della proprietà che possiamo avere è background-attachment: fixed;. Questo rende l'immagine di background fissa nella stessa posizione, rispetto alla pagina e rispetto al viewport (area visibile) del browser. Questo crea un effetto di parallasse di cui puoi vedere un esempio qui:

I gradienti di background

Un caso differente rispetto alla proprietà background-image è richiedere al browser di creare un gradiente.

La background-image in questo caso non ha un URL, ma invece ha un gradiente lineare.

Il modo più semplice per creare un gradiente è specificare un angolo. Questo controlla la direzione del gradiente e il passaggio da un colore all'altro. Infine somma i due colori che vuoi unire insieme in un gradiente per lo sfondo del tag.

Un gradiente che va dall'alto al basso e dal nero al bianco è:

section {
  background-image: linear-gradient(black,white);
}

Gli angoli più comuni usati per i gradienti sono:

0deg dall'alto al basso
90deg da sinistra a destra
180deg dal basso all'alto
270deg da destra a sinistra

Gli angoli soprariportati corrispondono a to top, to right, to bottom e to left, rispettivamente.

section {
  background-image: linear-gradient(to left,pink,orange);
}

Invece del nome dei colori, possiamo utilizzare i colori in notazione esadecimale per essere più dettagliati ed avere una maggiore varietà di opzioni:

section{
  background-image: linear-gradient(to left,#42275a, #734b6d)
      }

Possiamo anche includere più di due colori in un gradiente, creando differenti effetti e schemi di colore.

Conclusioni

Questo segna la fine della nostra introduzione alla sintassi di base della proprietà background-image.

Da qui le possibilità sono infinite e lasciano spazio a un sacco di creatività. Questi effetti aiutano l'utente ad avere una piacevole esperienza mentre visitano il tuo sito.

Spero che questo ti sia stato utile, grazie per aver letto il mio articolo.

Divertiti con i tuoi progetti e buona programmazione!