Summary  
This chapter explains how to use CSS properties—background-image, background-position, background-size, and background-repeat—to add and configure background images on HTML elements, covering how to specify the image URL, control repetition, set positioning, and scale the image.

General domain of usage  
Front-end web development

La propiedad `background-image` permite agregar una imagen como fondo de un elemento HTML. La sintaxis básica es muy sencilla:
```css
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.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gTW9kaSwgYWxpcXVhbS48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJveCB7CiAgd2lkdGg6IDMwMHB4OwogIGhlaWdodDogMTQwcHg7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZC1maXJzdC1leGFtcGxlLmpwZyIpOwp9

## background-repeat
Determina si la imagen se repetirá horizontalmente, verticalmente, en ambas direcciones o no se repetirá.
``` css
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+IG5vLXJlcGVhdDwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+cmVwZWF0PC9zcGFuPjwvZGl2PgogICAgPGRpdiBjbGFzcz0iYm94Ij48c3Bhbj5yZXBlYXQteDwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+cmVwZWF0LXk8L3NwYW4+PC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIG1hcmdpbjogMTBweDsKICB3aWR0aDogMTQwcHg7CiAgaGVpZ2h0OiAxNDBweDsKICBib3JkZXI6IDFweCBzb2xpZCBkYXJrb3JjaGlkOwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2JhY2tncm91bmQtcmVwZWVhdC1leGFtcGxlLndlYnAiKTsKCiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgpzcGFuIHsKICBwYWRkaW5nOiA1cHg7CiAgZm9udC1zaXplOiAxOHB4OwogIGJhY2tncm91bmQtY29sb3I6IHJnYigxNDUsIDE2NSwgMTgyKTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7Cn0KCi5ib3g6bnRoLWNoaWxkKDIpIHsKICBiYWNrZ3JvdW5kLXJlcGVhdDogcmVwZWF0Owp9CgouYm94Om50aC1jaGlsZCgzKSB7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IHJlcGVhdC14Owp9CgouYm94Om50aC1jaGlsZCg0KSB7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IHJlcGVhdC15Owp9

## 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`
```css
background-position: x y
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+aW4gdGhlIGNlbnRlcjwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+b24gdGhlIHJpZ2h0IHRvcDwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+b24gdGhlIGxlZnQgYm90dG9tPC9zcGFuPjwvZGl2PgogICAgPGRpdiBjbGFzcz0iYm94Ij48c3Bhbj51c2luZyBweDwvc3Bhbj48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIG1hcmdpbjogMTBweDsKICB3aWR0aDogMTQwcHg7CiAgaGVpZ2h0OiAxNDBweDsKICBib3JkZXI6IDFweCBzb2xpZCBkYXJrb3JjaGlkOwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2JhY2tncm91bmQtcG9zaXRpb24tZXhhbXBsZS53ZWJwIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDE4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtcG9zaXRpb246IGNlbnRlcjsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtcG9zaXRpb246IHJpZ2h0IHRvcDsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtcG9zaXRpb246IGxlZnQgYm90dG9tOwp9CgouYm94Om50aC1jaGlsZCg0KSB7CiAgYmFja2dyb3VuZC1wb3NpdGlvbjogNjAlIDEwcHg7Cn0=

## 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.
```css
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%`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+YXV0bzwvc3Bhbj48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJveCI+PHNwYW4+Y292ZXI8L3NwYW4+PC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3giPjxzcGFuPmNvbnRhaW48L3NwYW4+PC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3giPjxzcGFuPnZhbHVlIGluIHB4PC9zcGFuPjwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LXdyYXA6IHdyYXA7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5ib3ggewogIHdpZHRoOiAxNjBweDsKICBoZWlnaHQ6IDE0MHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtvcmNoaWQ7CiAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYmFja2dyb3VuZCtzaXplK2ltYWdlK2V4YW1wbGUucG5nIik7CiAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCnNwYW4gewogIHBhZGRpbmc6IDVweDsKICBmb250LXNpemU6IDI4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgxNDUsIDE2NSwgMTgyLCAwLjQ1KTsKfQoKLmJveDpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtc2l6ZTogYXV0bzsKfQoKLmJveDpudGgtY2hpbGQoMikgewogIGJhY2tncm91bmQtc2l6ZTogY292ZXI7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLXNpemU6IGNvbnRhaW47Cn0KCi5ib3g6bnRoLWNoaWxkKDQpIHsKICBiYWNrZ3JvdW5kLXNpemU6IDkwcHg7Cn0=

¿Qué hace la propiedad `background-image`?

¿Qué hace la propiedad `background-repeat`?

¿Qué propiedad determina la posición de la imagen de fondo de un elemento?

Domina los conceptos esenciales de CSS (Cascading Style Sheets), el lenguaje de estilos que transforma la apariencia de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas. Ideal para principiantes que buscan establecer una base sólida en CSS.

Aprenda qué es CSS, cómo conectarlo con HTML y cómo aplicar estilos a los elementos HTML utilizando selectores. Explore conceptos fundamentales como colores de texto, pseudo-clases de acción del usuario y variables en CSS.

Descubra cómo estilizar y formatear texto en sus páginas web. Aprenda a aplicar fuentes personalizadas y explore diversas propiedades de fuente para mejorar la apariencia del texto.

Aprenda los fundamentos del modelo de caja, que define la disposición y el espaciado de los elementos en una página web. Explore conceptos como el dimensionamiento de cajas, la adición de espacio a los elementos, el trabajo con elementos de bloque e inline, y el uso de pseudoclases estructurales y funcionales para estilos avanzados.

Descubra Flexbox, un potente método de diseño en CSS para organizar elementos en filas y columnas. Aprenda a controlar la dirección, alineación y espaciado de los elementos tanto horizontal como verticalmente, así como a personalizar elementos flex individuales para lograr diseños precisos.

Aprenda a mejorar el atractivo visual de sus páginas web con CSS. Explore técnicas para aplicar colores y fondos de imagen, estilizar imágenes, utilizar pseudo-elementos decorativos y agregar sombras para crear diseños impactantes.

Aplicación de Imágenes de Fondo a Elementos

Aplicación de Imágenes de Fondo a Elementos