background-repeat

Se hai provato ad impostare un’immagine di sfondo, molto probabilmente ti sarai accorto che essa viene ripetuta per tutta la lunghezza e altezza dell’elemento a cui viene applicata. Questa è una cosa del tutto normale, ed è il funzionamento predefinito di tutti i browser.
Logicamente, puoi modificare questo comportamento con la proprietà background-repeat, le cui possibilità sono:

• repeat; impostazione predefinita, ripete lo sfondo in orizzontale e verticale;

• repeat-x; ripete lo sfondo solo in orizzontale;

• repeat-y; ripete lo sfondo solo in verticale;

• no-repeat; non ripete lo sfondo ed inserisce l’immagine solo una volta.

Prendendo l’esempio precedente, se tu volessi inserire l’immagine solo una volta, dovresti scrivere:

div{
   background-image: url(images/my_image.png);
   background-color: #ff0000;
   background-repeat: no-repeat;
 }

Questo farebbe inserire l’immagine una sola volta e allineata nel punto di origine predefinito di qualsiasi elemento, ossia in alto a sinistra.
Ricorda, infine, che puoi anche specificare un background-color, che verrà applicato solo nel caso ci sia spazio vuoto, esterno all’ingombro dell’immagine.