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

Inserire immagini di sfondo con le proprietà CSS per il background

// Trick and Tips  

#CSS   #HTML  

Davide Bausach /

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.

Warning: include_once(/var/www/vhosts/getdbjs.com/httpdocs/template/getdbjs-theme/html_include): failed to open stream: No such file or directory in /var/www/vhosts/getdbjs.com/httpdocs/template/getdbjs-theme/components/blog/s/view-s-blog.php on line 89

Warning: include_once(): Failed opening 'template/getdbjs-theme/html_include/' for inclusion (include_path='.:/opt/plesk/php/7.0/share/pear') in /var/www/vhosts/getdbjs.com/httpdocs/template/getdbjs-theme/components/blog/s/view-s-blog.php on line 89
Operazione eseguita con successo!