Press ESC to close

Background-image

0 2567

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à.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Other stories

Margin CSS

Next Story

Background-color

Previous Story