La propiedad background-image permite agregar una imagen como fondo de un elemento HTML. La sintaxis básica es muy sencilla:

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

Como valor para la propiedad background-image, se utiliza url(), y dentro de estos paréntesis se especifica la URL de la imagen.

background-repeat

Determina si la imagen se repetirá horizontalmente, verticalmente, en ambas direcciones o no se repetirá.

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

background-position

background-position se utiliza para establecer la posición inicial de una imagen de fondo dentro del área de fondo de un elemento. Esta propiedad permite especificar dónde debe colocarse la imagen de fondo y cómo debe posicionarse en relación con el elemento. Es necesario definir la posición en los ejes x y y

background-position: x y

background-size

background-size especifica el tamaño de la imagen de fondo de un elemento. Puede utilizarse para escalar la imagen para que se ajuste al elemento o para establecer un tamaño específico para la imagen de fondo.

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

• auto mantiene la imagen de fondo en su tamaño original (predeterminado);
• cover escala la imagen para cubrir completamente el elemento manteniendo su relación de aspecto, lo que puede recortar partes de la imagen;
• contain escala la imagen para que encaje completamente dentro del elemento manteniendo su relación de aspecto, lo que puede dejar espacios vacíos;
• value establece dimensiones personalizadas para la imagen de fondo, como 100px 50px o porcentajes como 50%.