La proprietà background-image consente di aggiungere un'immagine come sfondo di un elemento HTML. La sintassi di base è molto semplice:

background-image: url("image-url.jpg");

Come valore per la proprietà background-image, si utilizza url(), e all'interno delle parentesi si specifica l'URL dell'immagine.

background-repeat

Determina se l'immagine verrà ripetuta orizzontalmente, verticalmente, in entrambe le direzioni o per niente.

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

background-position

background-position viene utilizzata per impostare la posizione iniziale di un'immagine di sfondo all'interno dell'area di sfondo di un elemento. Questa proprietà consente di specificare dove deve essere posizionata l'immagine di sfondo e come deve essere allineata rispetto all'elemento. È necessario impostare la posizione sugli assi x e y

background-position: x y

background-size

background-size specifica la dimensione dell'immagine di sfondo di un elemento. Può essere utilizzata per ridimensionare l'immagine in modo che si adatti all'elemento o per impostare una dimensione specifica per l'immagine di sfondo.

background-size: auto | cover | contain | value in px/em/rem;

• auto mantiene l'immagine di sfondo nella sua dimensione originale (predefinito);
• cover ridimensiona l'immagine per coprire completamente l'elemento mantenendo il suo rapporto d'aspetto, con possibile ritaglio di parti dell'immagine;
• contain ridimensiona l'immagine per adattarsi interamente all'interno dell'elemento mantenendo il suo rapporto d'aspetto, con possibile presenza di spazi vuoti;
• value imposta dimensioni personalizzate per l'immagine di sfondo, come 100px 50px o percentuali come 50%.