19- 🖼️ Imágenes de fondo en HTML: guía básica ✅

• Sintaxis de imágenes de fondo en HTML
• Atributos para imágenes de fondo en una página
• Repetición de imágenes de fondo
• Portada de fondo
• Estiramiento de imágenes de fondo

---

Sintaxis de imágenes de fondo en HTML

Para casi todos los elementos HTML se pueden especificar imágenes de fondo.

Para agregar una imagen de fondo en un elemento HTML, usamos el atributo style seguido de la propiedad background-image.

Si usamos la propiedad background-color, nos referimos al color de fondo que queremos asignar al elemento.

Ejemplo

Este es un ejemplo de un div con una imagen de fondo.

Código del ejemplo

 <div style="width: 300px; height: 200px; background-image: url('https://cdn.pixabay.com/photo/2024/08/26/20/34/peacock-9000198_1280.jpg'); background-size: cover; background-position: center;>
</div>
<p>Este es un ejemplo de un div con una imagen de fondo.</p>
                                    

Atributos para imágenes de fondo en una página

Los atributos relacionados con imágenes de fondo se aplican principalmente a través del uso de estilos en línea o archivos CSS. Las propiedades más comunes son background-image, background-position, y background-repeat.

Ejemplo

Ejemplo de background-image: esta propiedad define la imagen de fondo.

Ejemplo de background-position: la imagen está alineada a la izquierda.

Ejemplo de background-repeat: la imagen de fondo se repite. La imagen utilizada es pequeña, lo que permite ver el efecto de repetición claramente.

Código del ejemplo

<div style="width: 300px; height: 200px; background-image: url('https://cdn.pixabay.com/photo/2024/06/08/02/22/beautiful-woman-8815656_1280.jpg'); background-size: cover; background-position: center;>
</div>
<p>Ejemplo de <code>background-image</code>: esta propiedad define la imagen de fondo.</p>

<div style="width: 300px; height: 200px; background-image: url('https://cdn.pixabay.com/photo/2024/08/26/20/34/peacock-9000198_1280.jpg'); background-size: cover; background-position: left;>
</div>
<p>Ejemplo de <code>background-position</code>: la imagen está alineada a la izquierda.</p>

<div style="width: 300px; height: 200px; background-image: url('https://cdn.pixabay.com/photo/2024/08/30/15/12/small-pattern-9001234_1280.png'); background-repeat: repeat;>
</div>
<p>Ejemplo de <code>background-repeat</code>: la imagen de fondo se repite. La imagen utilizada es pequeña, lo que permite ver el efecto de repetición claramente.</p>
                                    

Repetición de imágenes de fondo

La propiedad background-repeat permite controlar cómo se repite una imagen de fondo en un elemento. Puedes repetirla horizontalmente, verticalmente o evitar que se repita.

Los valores más comunes son repeat, no-repeat, repeat-x (solo en horizontal), y repeat-y (solo en vertical).

Este es un ejemplo de un div con repetición de imagen de fondo.

Código del ejemplo

 <div style="width: 300px; height: 200px; background-color: rgba(255, 0, 0, 0.5); background-image: url('https://cdn.pixabay.com/photo/2024/08/26/20/34/peacock-9000198_1280.jpg'); background-size: cover; background-position: center;>
</div>
<p>Ejemplo de un fondo rojo semitransparente con una imagen de fondo.</p>
                                    

>

Portada de fondo

La propiedad background-size: cover permite que una imagen de fondo se ajuste completamente al tamaño del elemento en el que se encuentra, cubriendo todo el espacio disponible sin deformarse.

Ejemplo

Este es un ejemplo de un div con la propiedad background-size: cover, donde la imagen cubre completamente el área.

Estiramiento de imágenes de fondo

Cuando utilizamos background-size: contain o valores específicos en background-size, podemos controlar el estiramiento de la imagen. Esto permite ajustarla a un tamaño específico, sin que pierda proporción.

Ejemplo

Ejemplo de background-size: contain: la imagen de fondo se ajusta para caber completamente dentro del contenedor, manteniendo su proporción.

Ejemplo de background-size: 150px 100px: la imagen de fondo se estira a un tamaño específico, de 150px de ancho y 100px de alto, lo que puede modificar su proporción.

Código del ejemplo

 <div style="width: 300px; height: 200px; background-image: url('https://cdn.pixabay.com/photo/2024/08/26/20/34/peacock-9000198_1280.jpg'); background-size: contain; background-position: center;>
</div>
<p>Ejemplo de <code>background-size: contain</code>: la imagen de fondo se ajusta para caber completamente dentro del contenedor, manteniendo su proporción.</p>

<div style="width: 300px; height: 200px; background-image: url('https://cdn.pixabay.com/photo/2024/08/26/20/34/peacock-9000198_1280.jpg'); background-size: 150px 100px; background-position: center;>
</div>
<p>Ejemplo de <code>background-size: 150px 100px</code>: la imagen de fondo se estira a un tamaño específico, de 150px de ancho y 100px de alto, lo que puede modificar su proporción.</p> 
                                    

Ir al índice