11-Imágenes de Fondo en CSS: Crea Fondos Atractivos 🖼️

---

Imagen de fondo CSS

• Tema 1: Imagen de fondo CSS
• Tema 2: La propiedad de la imagen de fondo CSS

---

Imagen de fondo CSS

En este tema, aprenderemos a utilizar la propiedad background-image en CSS para agregar imágenes de fondo a los elementos HTML.

Ejemplo de código:

body {
    background-image: url('https://cdn.pixabay.com/photo/2024/10/11/19/50/animal-9113761_1280.jpg');
    background-size: cover;
    background-position: center;
}

Ejemplo Visual de Imagen de Fondo

Este contenedor tiene una imagen de fondo aplicada usando background-image en CSS, con las propiedades background-size: cover y background-position: center para asegurar que la imagen cubra todo el espacio del contenedor y esté centrada.

Ejemplo Visual de Párrafo con Imagen de Fondo

Este párrafo tiene una imagen de fondo aplicada mediante background-image en CSS. La imagen cubre todo el fondo del párrafo.

---

La propiedad de la imagen de fondo CSS

La propiedad background-image permite agregar una imagen de fondo a cualquier elemento HTML. Además, se pueden usar otras propiedades relacionadas para controlar el tamaño y la posición de la imagen.

Ejemplo de código:

div {
    background-image: url('otra-imagen.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Ejemplos Visuales y Tabla de Propiedades de Imagen de Fondo

Propiedad	Descripción	Valores Ejemplo
background-image	Define la imagen de fondo de un elemento.	url('imagen.jpg')
background-repeat	Establece si la imagen de fondo se repite.	no-repeat, repeat, repeat-x, repeat-y
background-size	Controla el tamaño de la imagen de fondo.	cover, contain, 100% 100%
background-position	Posiciona la imagen de fondo dentro del elemento.	center, top left, 50% 50%
background-attachment	Determina si la imagen de fondo se desplaza con la página o es fija.	scroll, fixed, local

---

Ir al índice

---