Curso de HTML5 y CSS3: Fondos - Posición, color, imagen y tamaño

Fundamentos de CSS para los fondos

Antes de profundizar en los diferentes aspectos de los fondos, es crucial comprender cómo CSS gestiona estas propiedades. Todos los elementos HTML pueden tener fondos aplicados utilizando CSS, lo que nos permite personalizar la presentación de nuestra página.

Propiedades de fondo en CSS

Las propiedades más importantes que utilizaremos para los fondos son:

background-color: Define el color del fondo.
background-image: Establece una imagen como fondo.
background-size: Controla el tamaño de la imagen de fondo.
background-position: Determina la posición de la imagen de fondo.
background-repeat: Controla la repetición de la imagen de fondo.

Aplicando color de fondo

La propiedad background-color nos permite establecer el color de fondo de un elemento. Podemos usar nombres de colores, valores hexadecimales o RGB.

Ejemplo de código: uso de color de fondo

El siguiente ejemplo muestra cómo aplicar un color de fondo a un div:

div {
    background-color: #3498db; /* Azul */
    padding: 20px;
    }

Uso de imágenes de fondo

Para usar imágenes de fondo, empleamos la propiedad background-image. Esta propiedad habilita la superposición de imágenes sobre otros elementos HTML.

Ejemplo de código: imagen de fondo

Veamos cómo podemos agregar una imagen de fondo a un contenedor:

div {
    background-image: url('imagen.jpg');
    background-size: cover; /* Fondo cubre el div */
    background-position: center; /* Imagen centrada */
    height: 300px; /* Altura del div */
    }

Tamaño de fondo

El tamaño de la imagen de fondo se gestiona mediante la propiedad background-size. Esta es una herramienta poderosa que permite ajustar cómo se presenta una imagen de fondo.

Valores de background-size

Los valores más comunes que podemos utilizar son:

cover: La imagen cubre completamente el elemento.
contain: La imagen se contiene dentro del elemento, manteniendo su relación de aspecto.
Dimensiones específicas, como 50%, 100px, etc.

Ejemplo de código: tamaño de fondo personalizado

A continuación, un ejemplo donde se utiliza un tamaño específico para la imagen de fondo:

div {
    background-image: url('imagen.jpg');
    background-size: 200px 100px; /* Ancho y alto específicos */
    }

Posición del fondo

La propiedad background-position establece la localización de la imagen de fondo. Podemos definir la posición utilizando keywords o coordenadas.

Palabras clave de posición

top
bottom
left
right
center

Ejemplo de código: posición del fondo

Veamos un ejemplo práctico para mostrar la posición de una imagen de fondo:

div {
    background-image: url('imagen.jpg');
    background-position: bottom right; /* Imagen en la esquina inferior derecha */
    }

Repetición de fondo

Finalmente, la propiedad background-repeat determina si la imagen de fondo se repetirá. Las opciones son:

repeat: La imagen se repite tanto en el eje X como en el Y.
no-repeat: La imagen no se repetirá.
repeat-x: La imagen se repite solo en el eje X.
repeat-y: La imagen se repite solo en el eje Y.

Ejemplo de código: control de repetición

A continuación, un ejemplo que muestra la opción no-repeat:

div {
    background-image: url('imagen.jpg');
    background-repeat: no-repeat; /* La imagen no se repetirá */
    }

Conclusiones

El manejo de fondos en HTML5 y CSS3 es un elemento crucial en la creación de sitios web atractivos y funcionales. Al comprender y aplicar propiedades como background-color, background-image, background-size, background-position y background-repeat, podrás personalizar la experiencia del usuario y aportar un toque único a tus proyectos. Recuerda siempre hacer pruebas en diferentes dispositivos para asegurarte de que tus fondos se vean bien en todas partes.

blog.vermiip.es

Curso de HTML5 y CSS3: Fondos – Posición, color, imagen y tamaño