Background-image, immagine di sfondo CSS, background

La proprietà background-image dei CSS consente di impostare un’immagine di sfondo di una pagina web oppure di un elemento.

Background-image esempi

Facciamo degli esempi pratici per vedere come utilizzare questa importante proprietà:

body {
  background-image: url("sfondo.jpg");
}

Quindi all’interno di url si specifica l’immagine da utilizzare. L’immagine può essere jpd, gif o anche png.

Chiaramente se l’immagine è dentro una cartella si deve specificare il percorso completo.

Facciamo quindi un esempio della proprietà background-image:

body {
  background-image: url("img/sfondo.jpg");
}

L’immagine di sfondo si può impostare anche ad un elemento, come nell’esempio sotto.

div{
  width:800px;
  height: auto;
  background-image: url("sfondo.jpg");
}

Ripetizione immagine di sfondo

Di default, impostando solo background-image, un’immagine viene ripetuta orizzontalmente e verticalmente. Di conseguenza può nascere l’esigenza di non ripetere l’immagine oppure di ripeterla solo orizzontalmente o solo verticalmente.

Background-repeat

La proprietà background-repeat con il valore impostato a repeat-x consente di ripetere un’immagine solo orizzontalmente, come da esempio sotto.

body {
  background-image: url("img/sfondo.jpg");
  background-repeat: repeat-x;
}

Quindi dopo aver impostato correttamente la proprietà background-image si utilizza background-repeat.

Allo stesso modo se impostiamo repeat-y l’immagine si ripete solo verticalmente.

body {
  background-image: url("img/sfondo.jpg");
  background-repeat: repeat-y;
}

Se invece impostiamo il valore no-repeat l’immagine non verrà ripetuta.

body {
  background-image: url("img/sfondo.jpg");
  background-repeat: no-repeat;
}

Può nascere l’esigenza di posizionare l’immagine in una posizione specifica rispetto a quella di default.

Background-position

La proprietà background-position serve a posizionare la posizione iniziale di un’immagine, inserita con la proprietà background-image, all’interno di una pagina web o di un elemento.

Si indicano due valori, il primo indica la posizione orizzontale mentre il secondo indica la posizione verticale. Si possono specificare i valori come top, right, bottom e left, valori in pixel, em, rem, ecc. oppure valori in percentuale.

Il valore di default è background-position: 0 0.

Facciamo quindi un esempio :

body {
  background-image: url("img/sfondo.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

I valori specificati right top corrispondono a 100% 0% e quindi si sposta a destra l’immagine del 100% (orizzontale) e verso il basso dello 0% (verticale).

Facciamo dunque un altro esempio indicando i valori in percentuale, come in quest’altro esempio:

body {
  background-image: url("img/sfondo.jpg");
  background-repeat: no-repeat;
  background-position: 20% -20%;
}

Oppure si possono anche indicare i valori in pixel o altre unità di misura, come da esempio sotto:

body {
  background-image: url("img/sfondo.jpg");
  background-repeat: no-repeat;
  background-position: 250px 150px;
}

In questo modo si sposta l’immagine a destra di 250 pixel e verso il basso di 150 pixel.

Inoltre nei moderni browser è possibile indicare fino a 4 valori per questa proprietà.

Conclusioni

In questa lezione abbiamo visto le proprietà background-image, background-repeat e background-position facendo degli esempi pratici al fine di capirne meglio le proprietà.

Lezione precedente: background-color

Lezione successiva: pseudo classi hover, active, visited