Valores de los colores

Los valores de los colores se pueden definir de varias formas:

Nombre predefinido: red, yellow, blue, green…Los valores de los colores se pueden definir de varias formas:

Nombre predefinido: red, yellow, blue, green…

Código hexadecimal: #RRGGBB o #RRGGBBA

RGB: Red, Green, Blue

RGBA: Red, Green, Blue, Alpha

HSL: Hue, Saturation, Lightness

Hue, Saturation, Lightness, Alpha

En nuestro caso, vamos a utilizar los valores definidos por su nombre, código hexadecimal y RGB o RGBA. El resto de valores no se van a utilizar.

color – Color del texto

La propiedad color se utiliza para definir el color del texto en un elemento HTML.

background-color – Color de fondo

La propiedad background-color se utiliza para establecer el color de fondo de un elemento HTML, como un div o una sección.

background-image – Imagen de fondo

La propiedad background-image se utiliza para establecer una imagen como fondo de un elemento HTML.

Puedes proporcionar la ruta de la imagen usando el formato url("...").

El valor none se utiliza para eliminar cualquier imagen de fondo.

background-attachment – Desplazamiento de la imagen de fondo

La propiedad background-attachment controla si la imagen de fondo se desplaza con el contenido de la página (scroll) o permanece fija en su posición mientras se desplaza el contenido (fixed).

background-position – Posición de la imagen de fondo

La propiedad background-position se utiliza para definir la posición inicial de la imagen de fondo dentro del elemento.

background-repeat – Repetición de la imagen de fondo

La propiedad background-repeat controla la forma en que la imagen de fondo se repite en el elemento. Puedes elegir entre repeat (repetir en ambas direcciones), repeat-x (repetir solo horizontalmente), repeat-y (repetir solo verticalmente) y no-repeat (no repetir la imagen).

header { background-image: url("patron-fondo.png"); background-repeat: repeat-x; /* Repetir solo horizontalmente */ }

background-size – Tamaño de la imagen de fondo

La propiedad background-size se utiliza para controlar el tamaño de la imagen de fondo en relación con el elemento que la contiene. La sintaxis de la propiedad background-size es la siguiente:

background-size: valor;

Valos puede ser cuelquier palabra reservada como en los siguientes casos:

auto: Este es el valor predeterminado. La imagen de fondo conserva su tamaño original y se repite si es necesario para llenar el contenedor.

cover: La imagen de fondo se escala para que cubra completamente el contenedor, recortando cualquier exceso que no quepa. Esto puede dar como resultado que la imagen se estire o recorte.

contain: La imagen de fondo se escala para que quepa completamente dentro del contenedor sin recortarla. Puede haber espacio vacío alrededor de la imagen si el contenedor tiene una relación de aspecto diferente a la imagen.

valor personalizado: Puedes especificar el tamaño de la imagen de fondo utilizando valores de longitud (píxeles, em, porcentaje) o usando auto para una de las dimensiones (ancho o alto) y un valor específico para la otra dimensión.