Background (Fondo) en CSS: Aprendiendo sus secretos: Parte 1 - Color y Modelos de color

Background es una de las propiedades CSS quizás más completas y quizás no tan sencillas de manejar, especialmente en el tema de los modelos de color ya sea hexadecimales, RGB o el nombre del color en inglés.

La propiedad background se compone de varias sub-propiedades, cosa que veremos más adelante, hoy solamente nos enfocaremos en background-color.

Me preguntaron, porqué no continuo los tutoriales y solamente estoy centrado últimamente en reseñas de anime y series de televisión, eso se debe a que de esos artículos obtengo miles de visitas por cada uno, mientras de los tutoriales apenas unos cientos.

La única cosa que hace que estos tutoriales continúen es su participación promocionando el contenido, con un Tweet o un enlace bastaría, el número de visitas a un artículo decide que sea abandonado o continuado.

Siguiente artículo 2: background-image

Propiedades CSS de background:

background-color
background-image
background-repeat
background-attachment
background-position

Desde mi punto de vista es un desperdicio poner background-color: nombre de color; porque cualquier otra regla declarada requerirá declarar por separado cada sub-propiedad. Así que al final de los tutoriales pondremos background como único parámetro y declaramos todos los valores en la misma línea.

Un ejemplo de regla básica aplicado al fondo del documento o etiquera body en hexadecimal color negro:

body
{
background-color : #FFFFFF;
}

Un ejemplo de regla básica aplicado al fondo del documento o etiqueta body en RGB color negro:

body
{
background-color : rgb(0,0,0);
}

Un ejemplo de regla básica aplicado al fondo del documento o etiquera body en con nombres en inglés color negro:

body
{
background-color : black;
}

Hexadecimales
Los colores hexadecimales son un código de 6 caracteres de extensión (o tres en modo resumido) que permiten representar en pantalla un color basado en un sistema de 16 caracteres, los primero números de 0 al 9 y las letras de la A a la F.

Un ejemplo básico sería para el color negro que se representa como 000000 (forma resumida 000), mientras que en el lado opuesto de la escala está F que representaría el blanco con su forma FFFFFF (forma resumida FFF). En CSS todo número hexadecimal va precedida por el signo "#":

Si esto lo hiciéramos para la regla body, definiendo un primer ejemplo con fondo blanco y otro con fondo negro:

Negro para la etiqueta body regla css:

body
{ background-color : #000; /* El elemento recibe un color negro de fondo */}

Blanco para la etiqueta body regla css:

body
{ background-color : #FFF; /* El elemento recibe un color blanco de fondo */}

RGB
Son colores aditivos o luminóforos que representan un color en pantalla que se basan en un sistema de 256 colores esto es, del 0 al 255 por cada canal, por un total de tres, recordando que R=Red (Rojo), G=Green (Verde) y B=Blue (Blue). Cuando los tres valores están a 255 eso es igual a blanco, cuando los tres están a 0 es negro. la regla se expresa como rgb(valorR,valorG,valorB).

Un ejemplo de regla básica aplicado al fondo del documento en RGB color negro:

body
{
background-color : rgb(0,0,0);
}

Un ejemplo de regla básica aplicado al fondo del documento en RGB color blanco:

body
{
background-color : rgb(255,255,255);
}

Un ejemplo de regla básica aplicado al fondo del documento en RGB color Azul:

body
{
background-color : rgb(0,0,255);
}

Modelos complementarios
Existen dos modelos complementarios a RGB que vale la pena ver, pero son más complicados, pero una vez que sabemos usar los modelos de color de cualquier programa de edición, son de los más simples de entender.

HSL (Hue, Saturation, Light)
Tono-matiz, Saturación y Brillo, este se compone de tres valores por tanto, el tono se basa en un canal 360 grados, otro en porcentaje de Saturación de 0% a 100% y otro del porcentaje de Brillo de 0% a 100%.

background-color: hsl(150,50%,20%);

HSLA (Hue, Saturation, Light, Alpha Channel)
Tono-matiz, Saturación, Brillo y Transparencia, este se compone de cuatro valores por tanto, el tono se basa en un canal de 360 grados, otro en porcentaje de Saturación de 0% a 100%, otro del porcentaje de Brillo de 0% a 100%, donde cero es negro y 100% es blanco y el último en grado de transparencia de un valor entre 0.0 y 1.0, donde 0.0 igual a 100% de transparencia y 1.0 es igual a 0% de transparencia, aunque los valores estén dados en términos de opacidad.

background-color: hsl(150,50%,20%,0.4);

Nombre de color
Esto no lo aconsejo, pues no es que sea simple como poner ocre, aguamarino, sino que debemos elegir de una base de 147 nombres en inglés y esto es poco práctico a fin de cuentas. Para ese caso se declara como:

background-color: BlanchedAlmond;

• Continua en Parte 2: Propiedades adicionales: background-image (Fondo con imágenes)