La propriété background-image permet d’ajouter une image en tant que fond d’un élément HTML. La syntaxe de base est très simple :

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

Comme valeur pour la propriété background-image, on utilise url(), et à l’intérieur de ces parenthèses, on indique l’URL de l’image.

background-repeat

Détermine si l’image sera répétée horizontalement, verticalement, dans les deux directions ou pas du tout.

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

background-position

background-position est utilisé pour définir la position de départ d'une image d'arrière-plan dans la zone d'arrière-plan d'un élément. Cette propriété permet de spécifier où l'image d'arrière-plan doit être placée et comment elle doit être positionnée par rapport à l'élément. Il est nécessaire de définir la position sur les axes x et y

background-position: x y

background-size

background-size définit la taille de l'image d'arrière-plan d'un élément. Cette propriété permet d'adapter l'image à l'élément ou de fixer une taille spécifique pour l'image d'arrière-plan.

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

• auto conserve la taille d'origine de l'image d'arrière-plan (valeur par défaut) ;
• cover adapte l'image pour couvrir entièrement l'élément tout en conservant son ratio, ce qui peut entraîner un rognage de l'image ;
• contain adapte l'image pour qu'elle soit entièrement visible dans l'élément tout en conservant son ratio, ce qui peut laisser des espaces vides ;
• value définit des dimensions personnalisées pour l'image d'arrière-plan, telles que 100px 50px ou des pourcentages comme 50%.