Colores y fondo en CSS, atributos y propiedades

5. Colores y fondo en CSS

En esta sección veremos las propiedades de los colores y los fondos en CSS.

5.1. Valores de los colores

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

• Nombre predefinido: red, yellow, blue, green…
• Código hexadecimal: #RRGGBB o #RRGGBBAA
• RGB: Red, Green, Blue
• RGBA: Red, Green, Blue, Alpha
• HSL: Hue, Saturation, Lightness
• HSLA: 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.

5.2. Tabla de colores básicos

HTML soporta alrededor de 140 nombres de colores diferentes. Entre ellos puedes encontrar los siguientes colores básicos:

Tabla 5.1. Colores de ejemplo

Color	Nombre	HEX	RGB
	black	#000000	0,0,0
	white	#ffffff	255,255,255
	red	#ff0000	255,0,0
	blue	#0000ff	0,0,255
	yellow	#ffff00	255,255,0
	gray	#808080	128,128,128
	green	#008000	0,128,0
	lime	#00ff00	0,255,0

Ejemplo de colores en hexadecimal con transparencia:

5.3. Propiedades más utilizadas

Algunas de las propiedades CSS relacionadas con el color y el fondo más utilizadas son las siguientes:

Propiedad	Descripción	Valores
color	Color del texto	RGB | HSL | HEX | nombre del color | RGBA | HSLA
background-color	Color de fondo	RGB | HSL | HEX | nombre del color | RGBA | HSLA | transparent
background-image	Imagen de fondo	url(«…») | none
background-repeat	Repetición de la imagen de fondo	repeat | repeat-x | repeat-y | no-repeat
background-attachment	Desplazamiento de la imagen de fondo	scroll | fixed
background-position	Posición de la imagen de fondo	percentage | length | left | center | right
background-size	Tamaño de la imagen de fondo	auto | cover | contain | valor
Opacity	Transparencia de un elemento	[ 0 – 1 ] (0 → totalmente transparente)

5.3.1. color – Color del texto

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

Ejemplo:

css p { color: #FF0000; /* Color rojo en formato HEX */ }

5.3.2. 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.

Ejemplo:

div { background-color: rgb(0, 128, 255); /* Color de fondo azul en formato RGB */ }

Ejercicio propuesto background-color

Observa el resultado de los siguientes estilos y estudia las diferencias que hay entre los distintos valores definidos.

.a { background-color: red; }
.b { background-color: #FF0000; }
.c { background-color: RGB(255,0,0); }
.d { background-color: HSL(0,100%,50%); }
.e { background-color: red; opacity: 0.5; }
.f { background-color: rgba(255, 0, 0, 0.5); }
.g { background-color: transparent; }

5.3.3. 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.

Ejemplo:

section { background-image: url("imagen-fondo.jpg"); }

Ejercicio propuesto background-image

Agrega los siguientes estilos en una página web y explica las diferencias que hay entre ellos:

body { background-image: url("https://bit.ly/2slA7jo");}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-x;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-y;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat;}
body { background-image: url("https://bit.ly/2slA7jo"); background-size: 100px 100px;}

5.3.4. 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).

Ejemplo:

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

Ejercicio propuesto background-repeat

La propiedad background-attachment indica si una imagen se mantiene fija o se desplaza con el resto de la página. Explica las diferencias que encuentras al establecer las siguientes propiedades:

body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: fixed;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: scroll;}

5.3.5. 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).

Ejemplo:

body { background-image: url("fondo-estrellado.jpg"); background-attachment: fixed; /* Fondo fijo en la ventana */ }

5.3.6. 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.

Ejemplos:

Posición en el Centro Superior: Este ejemplo coloca la imagen de fondo en el centro superior del elemento.

div { background-image: url("imagen-fondo.jpg"); background-position: center top; }

Posición en la Esquina Superior Derecha: En este caso, la imagen de fondo se coloca en la esquina superior derecha del elemento.

div { background-image: url("imagen-fondo.jpg"); background-position: right top; }

Posición en la Esquina Inferior Izquierda: Aquí, la imagen de fondo se encuentra en la esquina inferior izquierda del elemento.

div { background-image: url("imagen-fondo.jpg"); background-position: left bottom; }

Posición Personalizada en Píxeles: Puedes especificar coordenadas en píxeles para posicionar la imagen de fondo de manera precisa.

div { background-image: url("imagen-fondo.jpg"); background-position: 50px 30px; /* 50px desde la izquierda, 30px desde arriba */ }

Posición en el Centro del Contenedor: Para centrar la imagen de fondo tanto vertical como horizontalmente en el contenedor.

div { background-image: url("imagen-fondo.jpg"); background-position: center center; }

Posición en Porcentajes: Puedes utilizar porcentajes para posicionar la imagen de fondo en relación con el tamaño del elemento.

div { background-image: url("imagen-fondo.jpg"); background-position: 25% 75%; /* 25% desde la izquierda, 75% desde arriba */ }

5.3.7. 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;

Donde «valor» puede ser uno de los siguientes:

1. 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.
2. 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.
3. 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.
4. 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.

Ejemplos:

/* La imagen se ajusta para cubrir completamente el contenedor */
background-size: cover;

/* La imagen se ajusta para caber completamente dentro del contenedor */
background-size: contain;

/* La imagen tiene un ancho fijo de 200px y se ajusta automáticamente en altura */
background-size: 200px auto;

/* La imagen tiene un ancho fijo del 50% del contenedor y una altura fija de 100px */
background-size: 50% 100px;

La propiedad background-size es especialmente útil cuando se trabaja con imágenes de fondo en elementos como encabezados, secciones, divs, etc., y se desea controlar cómo se ajusta la imagen de fondo en relación con el tamaño del contenedor.

5.3.8. opacity – Opacidad del Elemento

La propiedad opacity se utiliza para controlar la transparencia de un elemento. Un valor de 1 representa opacidad completa (sin transparencia), mientras que un valor de 0 hace que el elemento sea completamente transparente. Los valores entre 0 y 1 permiten un grado variable de transparencia.

Ejemplo:

.caja-transparente { background-color: #000; /* Fondo negro */ opacity: 0.7; /* 70% de opacidad */ }

5.4. Ejemplo práctico parallax

Este ejemplo representa un típico Call to Action con un contenedor con una imagen de fondo que invita a los usuarios a realizar una acción específica, como comprar un producto o suscribirse a un servicio.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Call to Action</title>
    <style>
        *{font-family: Arial;}
        .cta-container {
            background-image: url("cta-background.jpg"); /* Imagen de fondo */
            background-size: cover; /* Cubre completamente el contenedor */
            background-position: center center; /* Centra la imagen */
            background-repeat: no-repeat; /* No se repite la imagen de fondo */
            background-attachment: fixed; /* Fondo fijo en la ventana */
            opacity: 0.9; /* Opacidad del contenedor */
            text-align: center; /* Alineación del contenido al centro */
            padding: 60px;
        }
        .cta-text {
            font-size: 24px;
        }
        .cta-button {
            background-color: #FF5733; /* Color de fondo del botón */
            color: #fff; /* Color del texto del botón en blanco */
            padding: 10px 20px; /* Relleno del botón */
            border: none; /* Sin borde */
            border-radius: 5px; /* Bordes redondeados */
            font-size: 18px;
            cursor: pointer; /* Cambio de cursor al pasar el ratón */
        }
    </style>
</head>
<body>
    <div class="cta-container">
        <h2 class="cta-text">¡Descubre nuestro producto estrella!</h2>
        <p class="cta-text">Obtén un 20% de descuento en tu primera compra.</p>
        <button class="cta-button">Comprar Ahora</button>
    </div>
</body>
</html>

En este ejemplo, hemos creado un contenedor de llamada a la acción (cta-container) con una imagen de fondo (cta-background.jpg). A continuación, se aplican las siguientes propiedades:

• background-size: cover: Hace que la imagen de fondo cubra completamente el contenedor.
• background-position: center center: Centra la imagen de fondo vertical y horizontalmente.
• background-repeat: no-repeat: Evita que la imagen de fondo se repita.
• background-attachment: fixed: Fija el fondo en la ventana, lo que crea un efecto de parallax o paralaje.
• opacity: 0.9: Aplica una opacidad del 90% al contenedor, haciendo que la imagen de fondo sea ligeramente visible a través del contenido.

El texto dentro del contenedor (cta-text) se centra en el centro del contenedor. El botón de llamada a la acción (cta-button) tiene un color de fondo, un color de texto en blanco, bordes redondeados y un cambio de color al pasar el ratón.

Ejemplo en CodePen

Veamos otro ejemplo de Call to Action. En este caso no vamos a usar la propiedad background-attachment: fixed. Como puedes ver, en este ejemplo, no se aprecia el efecto de paralaje, ya que la imagen no queda fija en el fondo y se desplaza junto con el contenedor.

.hero-image {
  background-image: url("https://www.eniun.com/wp-content/uploads/eniun-home-historia.jpg");
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

Ejemplo en CodePen

Comprueba tu apendizaje