Fondos

Podcast de CSS - 053: Antecedentes

Fondos

Detrás de cada cuadro CSS hay una capa especializada llamada capa en segundo plano. CSS ofrece una variedad de maneras de realizar cambios significativos en él, lo que incluye permitir múltiples fondos.

Las capas en segundo plano están más alejadas del usuario, que 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 ningún borde.

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 color válido establecido en una capa de fondo se sitúa detrás de otros elementos 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 URI de datos con la función de CSS url
• Imagen creada de forma dinámica mediante una función de CSS de gradiente.

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

Fondos del gradiente de CSS

Existen varias funciones de gradiente de CSS 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 tiene un tamaño intrínseco para coincidir 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 manera predeterminada, las imágenes de fondo se repiten horizontal y verticalmente para llenar todo el espacio de la capa de fondo.

Usa la propiedad background-repeat con uno de los siguientes valores para cambiar esto:

• repeat: La imagen se repite dentro del espacio disponible y se corta según sea necesario.
• round: La imagen se repite de forma horizontal y vertical para adaptarse a la mayor cantidad de instancias en el espacio disponible. A medida que aumenta el espacio disponible, se estira la imagen y, después de estirar la mitad de su ancho original, se comprime para agregar más instancias.
• space: La imagen se repite de forma horizontal y vertical para adaptarse a la mayor cantidad de instancias en el espacio disponible sin cortar, espaciando 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 establecer 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 establece el comportamiento de repetición vertical.

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

La abreviatura también tiene convenientes opciones 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 estas capacidades de la propiedad background-repeat:

Posición en segundo plano

Es posible que hayas notado que, cuando algunas imágenes de la Web tienen un estilo con una declaración background-repeat: no-repeat, esas imágenes se muestran en la parte superior izquierda del contenedor.

La posición inicial de las imágenes de fondo es 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 de los ejes x e y de manera independiente, con dos valores de forma predeterminada.

Cuando se utilizan longitudes y porcentajes de CSS, el primer parámetro corresponde al eje horizontal, mientras que el segundo, al eje vertical.

Cuando se usan palabras clave solo, el orden de estas 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 conveniente abreviación de un valor. el valor omitido se resuelve en 50%. A continuación, verás un ejemplo que lo demuestra con las palabras clave que acepta la propiedad background-position:

Además del formulario predeterminado de dos parámetros y uno de parámetros: 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 CSS se debe originar el desplazamiento.

Cuando se usan tres parámetros, el valor o la longitud de un CSS puede ser el segundo o tercer parámetro, y los otros dos pueden ser palabras clave. la palabra clave que tenga éxito se usará para determinar el borde al que corresponde la longitud o el valor del CSS. 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 de CSS, esta se coloca en la parte superior del cuadro, el valor 20% representa un descuento del 20% de la parte 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% de 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 correspondientes a un desplazamiento con 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 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 valores de CSS y 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 basa en su ancho, alto y relación de aspecto intrínsecos (reales).

La propiedad background-size usa valores de porcentaje y longitud de 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 usa de forma independiente, el tamaño de la imagen de fondo se basa en su ancho y alto intrínsecos. Cuando auto se usa 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 de fondo. Esto puede significar que la imagen se estiró o se recortó.
• contain: Cambia el tamaño de la imagen para que ocupe el espacio sin estirarla ni recortarla. Como resultado, puede quedar un espacio vacío que hará 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 muestra estas palabras clave en acción:

Demostración que muestra cómo aplicar 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 (las imágenes forman parte de una capa de fondo) una vez que la capa es visible en la 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 determinado 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 ocupe un espacio original, 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 en la que se habilitó la capa de fondo hasta que el viewport se desplace fuera de la pantalla por toda la capa.

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 mueven a lo largo del espacio que ocupan a medida que ese espacio se renderiza dentro y fuera de los límites del cuadro CSS (por lo general, debido al desplazamiento, las transformaciones 2D o 3D).

Origen en segundo plano

La propiedad background-origin te permite modificar el área de fondos asociada con un cuadro específico. 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 en una capa en segundo plano, independientemente de los límites creados por la propiedad background-origin.

Al igual que 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 usan estas palabras clave, se recortará o recortará cualquier renderización del fondo que supere 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 que el texto del cuadro de contenido. Para que este efecto sea evidente en el texto dentro de un cuadro CSS, el texto debe ser transparente o total o parcialmente.

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, que es relativamente nueva.

Varios fondos

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

Se definen varios fondos de arriba abajo. El primer fondo es el más cercano al usuario, mientras que el último es el más lejano al usuario.

El navegador designa la única capa de fondo definida o la última como capa final en segundo plano. Solo esta capa puede asignar un background-color.

Se pueden configurar varias capas de forma individual con la mayoría de las propiedades de CSS relacionadas con el segundo plano separadas por comas, como se demuestra en el fragmento de código y 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 facilitar el diseño de la capa de fondo de un cuadro, especialmente cuando se desean múltiples 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 por la forma abreviada de declarar varios fondos. Se deben proporcionar los valores de posición y tamaño, separados por una barra (/). Declarar el origen y el comportamiento del clip en el orden correcto te permite aprovechar la configuración de palabras clave válidas para ambos de forma simultánea.

La siguiente declaración recorta el fondo y lo origina desde 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 para que sean las siguientes:

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 fondos de CSS