Come inserire un'immagine di sfondo ad un div o ad un altro elemento html

#CSS   #HTML  

Inserire un'immagine di sfondo ad un div o ad un elemento html è una cosa molto semplice, è sufficiente utilizzare la regola background-image nel seguente modo:

    background-image: url("myImage.png");

Questa regola ha bisogno però di essere affiancata da altre proprietà che ne dettaglino l'esatto funzionamento e posizionamento all'interno del suo contenitore, altrimenti l'effetto che si otterrà e quello di una ripetizione dell'immagine sia in senso orizzontale che verticale per tutto lo spazio occupato dal contenitore.

Per ovviare alla situazione precedentemente descritta si può usare la regola background-repeat che può essere impostata nel seguente modo: repeat-x, repeat-y, no-repeat; rispettivamente per ripetere l'immagine solo orizzontalmente, solo verticalmente e non ripeterla affatto. Nell'ultimo caso l'immagine sarà posizionata di default in alto a sinistra del suo contenitore.

È possibile posizionare l'immagine utilizzando la proprietà background-position che può avere i seguenti valori:

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom
• valori percentuali (es. 50% 75%)
• valori in pixel (es. 20px 100px)
• initial (valore di default)

Nei valori sopra indicati il primo identifica il posizionamento del background rispetto all'asse delle X mentre il secondo il posizionamento rispetto all'asse delle Y.

La grandezza dell'immagine rispetto al suo contenitore può essere impostata con la proprietà background-size, che può avere i seguenti valori:

• auto
• valore in percentuale (es. 100% 60%)
• valore in pixel (es. 30px 70px)
• cover
• contain
• initial (valore di default)

Il background può essere anche posizionato in modo che sia fissato al suo contenitore con la proprietà background-attachment con i seguenti valori:

• scroll
• fixed
• local
• initial (valore di default)

Per completezza includo anche la proprietà background-color che può essere utile per impostare il colore di sfondo dell'elemento usato come contenitore.
Il colore può essere impostato in tre diversi modi: usando il nome del colore, il codice esadecimale o il colore rgb (o rgba che comprende la trasparenza) come del seguente esempio:

    
    div{
      background-color: red;
    }

    div{
      background-color: #ff0000;
    }

    div{
      background-color: rgb(220, 0, 255);
    }

    div{
      background-color: rgba(220, 0, 255, 0.5);
    }

Maggiori dettagli sul funzionamento di ogni valore per le diverse proprietà possono essere consultati sul sito w3schools.