La propiedad background: color, image, repeat, position, size, attachment y más

En una anterior publicación se habló sobre las propiedades más importantes del modelo de cajas y se postergó la propiedad background para más adelante.

background:; tiene muchas derivadas y permite generar efectos sorprendentes.

Un ejemplo es el efecto parallax al que también se le dedicó una entrada.

A pesar de la gran cantidad de propiedades estas se pueden resumir en función de si acompañan una imagen de fondo o no.Fondos sin imágenes

• background-color:;
• gradientes
  • lineal
  • radial

Todo resumido

• Versión resumida de todas
• Mi chuleta de backgrounds

Fondos con imágenes

• background-image:url(»);
• background-repeat:;
• background-position:;
• background-size:;
• background-attachment:;
• background-origin:;
• background-clip:;
• background-blend-mode:;

background-color

La propiedad background color no tiene mucho misterio.

Simplemente debemos indicar el color en un formato válido.

En esta entrada encontrarás mucha información útil sobre rgb, rgba, hexadecimal y web safe colors.

Gradientes

Los gradientes pueden ser lineales o radiales.

Resulta irónico que no siendo una imagen se indican mediante la expresión background-image;

Se suelen acompañar de la propiedad background-color; por si fallara el gradiente.

Dicho de otro modo, en una o en dos dimensiones.

¡Cuidado porqué a veces un gradiente lineal se indica con un ángulo y puede confundir si es lineal o radial![vc_custom_heading text=»Gradientes lineales» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]El gradiente lineal toma siempre el siguiente formato

background-image: linear-gradient(ángulo, color1, color2, ...);

Fijaros que si buscáis bibliografía dónde dice ángulo encontraréis direction.

Pienso que es muchísimo más fácil indicar directamente 0deg para el vertical y 90deg para el horizontal (exacto, va en contra de la primera intuición)

De este modo nos ahorramos recordar expresiones del tipo «to right«, «to top«, … y parecidas.Si tenemos el siguiente css

div{width:400px;height:200px;}
.lineal{
	backgrond-color:grey; /*en caso de no soportar el gradiente*/
	background-image:linear-gradient(90deg, red, orange, yellow, green, blue, purple);
}

el resultado final es:

[vc_custom_heading text=»Gradientes radiales» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]El gradiente radial se complica un poco más que el lineal.

Tiene el siguiente formato

background-image: radial-gradient(forma, color1 radio1%, color2 radio2%, color3 radio3%);

La forma puede tomar los valores ellipse | circle.

Por defecto la forma siempre es una ellipse.

La expresión se puede complicar por lo que personalmente me va bien usar los porcentajes y olvidarme de palabras para los gruesos difíciles de recordar o en su defecto buscarlas en la bibliografía cada vez.Si tenemos el siguiente css

div{width:400px;height:200px;}
.radial{
	background-color:grey; /*en caso de no soportar el gradiente*/
	background-image:radial-gradient(ellipse, red 15%, orange 35%, yellow 50%, green 65%, blue 85%, purple);
}

el resultado final es:

background-image

La propiedad background-image puede usarse tanto para generar gradientes de colores como para mostrar una imagen de fondo.

Para mostrar una imagen de fondo se usa la expresión:

background-image:url('');

Es importante tener en cuenta que si no se indica lo contrario la imagen se repite en el eje horizontal y el vertical.

También, es indiferente usar comillas simples de comillas dobles.

Para controlar este comportamiento podemos hacer uso de la expresión background-repeat.

background-repeat

La propiedad background-repeat permite controlar si la imagen de fondo se repite en el eje horizontal, en el vertical o en ninguno de los dos.

Se puede escribir de forma resumida o no. Veamos algunos ejemplos:

background-image:url('logo-crossfit.png');
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-x;

background-position

Dado un contenedor podemos posicionar la imagen en el lugar que queramos del contenedor.

Tiene especial interés si vamos a asegurarnos de que la imagen no se repite horizontalmente o verticalmente.

De lo contrario no apreciaríamos el efecto de background-position.

Para posicionarse pueden usarse las palabras top, right, left, bottom, center.

Sin embargo personalmente soy partidario de usar porcentajes.

Veamos algunos ejemplos:

div{width:400px;height:200px;border:1px solid #000;}
.posicionamiento-background{
background-image:url('logo-crossfit.png');
background-repeat:no-repeat;
background-position:0% 0%; /*superior izquierdo*/
background-position:50% 0; /**/
background-position:100% 0; /*extremo superior derecho*/
background-position:0 50%; /**/
background-position:0 100%; /*extremo inferior izquierdo*/
background-position:100% 100%; /*inferior derecho*/
background-position:50% 50%; /*en el centro*/
}

Es importante que tengas en cuenta que se sitúa en el espacio un fondo y nunca una caja.

¡No te confundas con el posicionamiento de cajas!

background-size

El fondo de una imagen puede mayormente:

• Cubrir toda la superficie disponible sin deformar la imagen. Lo que hace que si la imagen es más grande que el fondo no se vea la imagen entera, sólo una parte.
• Hacer tan grande la imagen haciéndola caber dentro de los límites. Lo que hace que puedan quedar espacios blancos.

Es interesante jugar con la propiedad background-repeat; para evitar que esta repita perjudicando el resultado buscado.Dada la siguiente imagen original se cumple que:

• tiene unas dimensiones reales de 1200px x 800px
• la vamos a usar como fondo para un contenedor de dimensiones 600px x 600px

Observaremos el efecto de aplicar los siguientes estilos a un contenedor

div{width:600px;height:600px;border:1px solid #000;}
.background-size{
	background-image:url('gato-perro.jpg');
	background-repeat:no-repeat;
	/*background-size:cover;*/
	/*background-size:contain;*/
}

[vc_custom_heading text=»imagen original» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

[vc_custom_heading text=»background-size:cover» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»][vc_single_image image=»2380″ img_size=»full» add_caption=»yes» qode_css_animation=»»][vc_custom_heading text=»background-size:contain;» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

background-attachment

La propiedad background-attachment nos permite definir si el fondo quedará fijo cuando hagamos scroll con el ratón o si se desplazará junto con la caja.

Esta propiedad es la base del efecto parallax.

Los valores más interesantes que puede tomar son los siguientes:

background-attachment: scroll;
background-attachment: fixed;

Es interesante combinar la propiedad con background-repeat para que el fondo no se repita y desmonte el efecto conseguido.

background-origin

La propiedad background-origin tiene interés cuando la caja contenedora tiene un padding y/o contenido en su interior.

Puede indicar:

• Si el background-image se empieza a dibujar en el borde (extremo de la caja). border-box.
• Si el background-image se empieza a dibujar justo dónde empieza el padding (no incluye el borde de la caja).  padding-box.
• Si el background-image se empieza a dibujar dónde el contenido.  content-box.

background-clip

La propiedad background-clip es muy parecida a background-origin.

Puede indicar:

• Si el background-color se empieza a dibujar en el borde (extremo de la caja). border-box.
• Si el background-color se empieza a dibujar justo dónde empieza el padding (no incluye el borde de la caja).  padding-box.
• Si el background-color se empieza a dibujar dónde el contenido.  content-box.

Se usa para colores. (a diferencia de background-origin que se usa para imágenes).

background-blend-mode

Esta propiedad no es compatible con Internet Explorer.

Aún así es interesante.

Sirve para controlar en caso de indicar varias imágenes de fondo como se van a mezclar.

En este caso w3schools tiene una aplicación realmente interesante. Os remito a este enlace.

Puede tomar los siguientes valores:

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Todas resumidas

El conjunto de todas las expresiones anteriores son una buena cantidad.

Es interesante usar algún tipo de expresión abreviada que nos permita usar tantas líneas de código.

Es lo que se conoce como expresión shorthand.

Puede tomar los siguientes valores (el orden es indiferente):

background: <background-color>  <background-image> <background-repeat> <background-attachment> <background-position>

No es necesario ponerlos todos.

Sólo los mínimos indispensables que nos interesen para que se visualice correctamente.

Mi chuleta de instrucciones CSS para background

background-color:;/* transparent | color en formato válido*/
background-image:url(''); /*(imágenes separadas por coma)*/
background-origin: ; /* padding-box|border-box|content-box */
background-position:; /* left top | left bottom | left center | center | x% y% | ... */
background-size: ; /* cover | contain */
background-repeat:; /* repeat|repeat-x|repeat-y|no-repeat */
background-attachment: ; /* scroll | fixed */ 
background-clip: ; /* border-box|padding-box|content-box */
background-blend-mode:; /* no soportado por IE . Posibles valores normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity; Como se mezclan los fondos en caso de 2 o más. */
background:; /* podemos escribirlas todas en una declaración */

Querido lector,

Hasta aquí una entrada extensa dónde he intentado abarcar la mayor parte de información posible.

Ahora es cuestión de coger el sublime o el brackets y empezar a teclear y testear por tu cuenta.

¡Espero que te sea de utilidad!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!