Fondos

El podcast de CSS - 053: Background

Fondos

Detrás de cada cuadro de CSS, hay una capa especializada denominada capa de fondo. CSS ofrece una variedad de formas de realizar cambios significativos en él, incluida la posibilidad de usar varios fondos.

Las capas de fondo están más alejadas del usuario y se renderizan detrás del contenido de un cuadro a partir de su región padding-box. Esto permite que la capa de fondo no se superponga con los bordes.

Color de fondo

Uno de los efectos más simples que puedes aplicar a una capa de fondo es configurar el color. El valor inicial de background-color es transparent, lo que permite que el contenido de un elemento superior sea visible. Un conjunto de color válido en una capa de fondo se encuentra detrás de otros objetos pintados en ese elemento.

Imágenes de fondo

En la parte superior de la capa background-color, puedes agregar una imagen de fondo con la propiedad background-image. Un background-image acepta lo siguiente:

• Una URL de imagen o un URI de datos con la función url de CSS.
• Imagen creada de manera dinámica por una función de CSS de gradiente.

Configura una imagen de fondo con la función de CSS url

Fondos con gradiente de CSS

Existen varias funciones de CSS de gradiente que te permiten generar una imagen de fondo cuando se pasan dos o más colores.

Independientemente de la función de gradiente que se use, la imagen resultante se ajusta de forma intrínseca para que coincida con la cantidad de espacio disponible.

Demostración que muestra un ejemplo de cómo aplicar una imagen de fondo con funciones de gradiente:

Repetición de imágenes de fondo

De forma predeterminada, las imágenes de fondo se repiten horizontal y verticalmente para llenar todo el espacio de la capa de fondo.

Cambia esto mediante la propiedad background-repeat con uno de los siguientes valores:

• repeat: La imagen se repite dentro del espacio disponible y se recorta según sea necesario.
• round: La imagen se repite de manera horizontal y vertical para adaptarse a la mayor cantidad de instancias posible en el espacio disponible. A medida que aumenta el espacio disponible, la imagen se estira y, después de estirar la mitad de su ancho original, se comprime para agregar más instancias de imagen.
• space: La imagen se repite de manera horizontal y vertical para adaptarse a tantas instancias dentro del espacio disponible sin recortarse y separa las instancias de la imagen según sea necesario. Las imágenes repetidas tocan los bordes del espacio que ocupa una capa de fondo, con un espacio en blanco distribuido de manera uniforme entre ellas.

La propiedad background-repeat te permite configurar el comportamiento de los ejes "x" e "y" de forma independiente. El primer parámetro establece el comportamiento de repetición horizontal y el segundo, el de repetición vertical.

Si usas un solo valor, se aplicará a las repeticiones horizontales y verticales.

La abreviatura también tiene opciones convenientes de una palabra para que tu intención sea más clara.

El valor repeat-x repite una imagen solo de forma horizontal. Esto equivale a repeat no-repeat.

En la siguiente demostración, se muestran las capacidades de la propiedad background-repeat:

Posición de fondo

Es posible que hayas notado que el estilo de algunas imágenes de la Web se establece mediante una declaración background-repeat: no-repeat; estas se muestran en la parte superior izquierda de su contenedor.

La posición inicial de las imágenes de fondo es en la parte superior izquierda. La propiedad background-position te permite cambiar este comportamiento desplazando la posición de la imagen.

Al igual que con background-repeat, la propiedad background-position te permite posicionar imágenes a lo largo del eje x e y de forma independiente, con dos valores de forma predeterminada.

Cuando se usan las longitudes y los porcentajes de CSS, el primer parámetro corresponde al eje horizontal y el segundo, al eje vertical.

Cuando se utilizan las palabras clave solo, el orden de las palabras clave no importa:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

La propiedad background-position también tiene una abreviatura conveniente de un valor; el valor omitido se resuelve en 50%. A continuación, se incluye un ejemplo que demuestra esto con las palabras clave que acepta la propiedad background-position:

Además de la forma predeterminada de dos y un parámetro, la propiedad background-position también acepta hasta cuatro parámetros.

Cuando se usan tres o cuatro parámetros, la longitud o el porcentaje de CSS debe estar precedido por las palabras clave top, left, right o bottom para que el navegador calcule desde qué borde del cuadro de CSS se debe originar el desplazamiento.

Cuando se usan tres parámetros, la longitud o el valor del CSS puede ser el segundo o el tercer parámetro, mientras que los otros dos son palabras clave. La palabra clave que tenga éxito se usará para determinar el límite del valor o la longitud del CSS que corresponde al desplazamiento. El desplazamiento de la otra palabra clave especificada se establece en 0.

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

Si se aplica background-position: top left 20% a una imagen de fondo CSS, la imagen se coloca en la parte superior del cuadro. El valor 20% representa un desplazamiento del 20% con respecto a la izquierda del cuadro (en el eje x).

Si se aplica background-position: top 20% left a una imagen de fondo de CSS, el valor del 20% representa un desplazamiento del 20% con respecto a la parte superior del cuadro de CSS (en el eje y), y la imagen se coloca a la izquierda del cuadro.

Cuando se usan cuatro parámetros, las dos palabras clave se combinan con dos valores que corresponden a un desfase con respecto a los orígenes de cada palabra clave especificada. Si se aplica background-position: bottom 20% right 30% a una imagen de fondo, esta se posiciona un 20% desde la parte inferior y un 30% desde la derecha del cuadro de CSS.

En la siguiente demostración, se demuestra este comportamiento:

A continuación, se muestran más ejemplos del uso de la propiedad background-position con una combinación de CSS y valores de palabras clave:

Tamaño del fondo

La propiedad background-size establece el tamaño de las imágenes de fondo. De forma predeterminada, el tamaño de las imágenes de fondo se ajusta en función de su ancho, altura y relación de aspecto intrínsecos (reales).

La propiedad background-size usa valores porcentuales y de longitud del CSS o palabras clave específicas. La propiedad acepta hasta dos parámetros que te permiten cambiar el ancho y la altura de un fondo de forma independiente.

La propiedad background-size acepta las siguientes palabras clave:

• auto: Cuando se utiliza de forma independiente, el tamaño de la imagen de fondo se basa en su ancho y alto intrínsecos. Cuando se usa auto junto con otro valor de CSS para el ancho (primer parámetro) o la altura (segundo parámetro), la dimensión establecida en auto se ajusta según sea necesario para mantener la relación de aspecto natural de la imagen. Este es el comportamiento predeterminado de la propiedad background-size.
• cover: Cubre toda el área de la capa en segundo plano. Esto puede significar que la imagen se estiró o recortó.
• contain: Ajusta el tamaño de la imagen para llenar el espacio sin estirarla ni recortarla. Como resultado, puede quedar un espacio vacío que provocará que la imagen se repita, a menos que background-repeat se establezca en no-repeat.

Los últimos 2 están diseñados para usarse de forma independiente sin otro parámetro.

La siguiente demostración demuestra estas palabras clave en acción:

Demostración que muestra cómo se aplican estas palabras clave a background-size:

Archivo adjunto en segundo plano

La propiedad background-attachment te permite modificar el comportamiento de posición fija de las imágenes de fondo (imágenes que forman parte de una capa de fondo) una vez que la capa es visible en una pantalla.

Acepta 3 palabras clave: scroll, fixed y local.

El comportamiento predeterminado de la propiedad background-attachment es el valor inicial de scroll. Cuando se necesita más espacio, las imágenes se mueven con ese espacio dentro de la capa de fondo determinada por los límites del cuadro CSS.

El uso del valor fixed corrige la posición de las imágenes de fondo en el viewport.

Una vez que el espacio de las imágenes de la capa de fondo originalmente se debe desplazar (o renderizar) fuera de la pantalla, las imágenes dentro de la capa de fondo permanecen fijas en la posición original que la capa de fondo habilitó hasta que el viewport desplaza toda la capa fuera de la pantalla.

La palabra clave local permite que la posición de las imágenes de fondo se fije en relación con el contenido del elemento. Las imágenes de fondo ahora se desplazan por el espacio que ocupan, ya que se renderiza dentro y fuera de los límites del cuadro CSS (generalmente debido a transformaciones de desplazamiento, 2D o 3D).

Origen en segundo plano

La propiedad background-origin te permite modificar el área de fondos asociados con un cuadro en particular. Los valores que acepta la propiedad corresponden a las regiones border-box, padding-box y content-box de un cuadro .

Prueba estas opciones con la siguiente demostración:

Clip de fondo

La propiedad background-clip controla lo que se ve visualmente desde una capa en segundo plano, sin importar los límites que cree la propiedad background-origin.

Al igual que con background-origin, las regiones que se pueden especificar son border-box, padding-box y content-box, que corresponden al lugar en el que se puede renderizar una capa en segundo plano de CSS. Cuando se usen estas palabras clave, se recortará o recortará cualquier renderización del fondo que se encuentre más allá de la región especificada.

La propiedad background-clip también acepta una palabra clave text que recorta el fondo para que no sea más allá del texto dentro del cuadro de contenido. Para que este efecto sea evidente en el texto real de un cuadro CSS, el texto debe ser parcial o totalmente transparente.

Es una propiedad relativamente nueva. En el momento de la redacción de este documento, Chrome y la mayoría de los navegadores requieren el prefijo -webkit- para usar esta propiedad.

Varios fondos

Como se mencionó al comienzo del módulo, la capa de fondo permite definir varias subcapas. Para abreviar, me referiré a estas subcapas como fondos.

Múltiples fondos se definen de arriba abajo; el primero es el más cercano al usuario, mientras que el último es el más lejano a este.

El navegador designa el único fondo definido o la última capa como la capa final en segundo plano. Solo esta capa puede asignar un elemento background-color.

Se pueden configurar varias capas individualmente con la mayoría de las propiedades de CSS relacionadas con el fondo que están separadas por comas, como se muestra en el fragmento de código y en la demostración en vivo a continuación.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

La abreviatura del fondo

Para que sea más fácil darle estilo a la capa de fondo de un cuadro (especialmente cuando se desean varias capas de fondo), hay una abreviatura que sigue el siguiente patrón específico:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

El orden es importante en la forma abreviada de declarar varios fondos. Los valores de posición y tamaño deben proporcionarse, separados por una barra diagonal (/). Si declaras el comportamiento del origen y del clip en el orden correcto, podrás aprovechar la configuración de palabras clave que sean válidas para ambos a la vez.

La siguiente declaración recorta el fondo y lo origina en el cuadro de contenido:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Con esta semántica abreviada en mente, las declaraciones anteriores relacionadas con el segundo plano del fragmento de código podrían reescribirse de la siguiente manera:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los antecedentes de CSS