Fondos

The CSS Podcast - 053: Background

Detrás de cada cuadro de CSS, hay una capa especializada llamada capa de fondo. El CSS ofrece una variedad de formas de realizar cambios significativos, lo que incluye permitir varios fondos.

Las capas de fondo están más lejos 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 establecer 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 encuentra 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 un URI de datos con la función CSS url
• Es una imagen creada de forma dinámica por una función de gradiente CSS.

Cómo establecer una imagen de fondo con la función CSS url

Fondos con gradientes 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 tiene un tamaño intrínseco 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:

Repite las imágenes de fondo

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

Para cambiar esto, usa 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 horizontal y verticalmente para que se ajusten tantas instancias como sea posible en el espacio disponible. A medida que aumenta el espacio disponible, la imagen se estira y, después de estirar la mitad del ancho original de la imagen, se comprime para agregar más instancias de imagen.
• space: La imagen se repite horizontal y verticalmente para que quepan tantas instancias como sea posible en el espacio disponible sin recortarse, y se espacia según sea necesario. Las imágenes repetidas tocan los bordes del espacio que ocupa una capa de fondo, con espacios en blanco distribuidos 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, 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 horizontalmente, lo que equivale a repeat no-repeat.

En la siguiente demostración, se muestran estas funciones de la propiedad background-repeat:

Posición del fondo

Es posible que hayas notado que, cuando algunas imágenes en la Web se aplican estilos con 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 la esquina superior izquierda. La propiedad background-position te permite cambiar este comportamiento compensando 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 forma independiente con dos valores de forma predeterminada.

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

Cuando solo se usan palabras clave, 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 abreviatura conveniente de un valor; el valor omitido se resuelve en 50%. A continuación, se muestra un ejemplo que demuestra esto con las palabras clave que acepta la propiedad background-position:

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

Cuando se usan tres o cuatro parámetros, una longitud o un porcentaje de CSS deben ir precedidos de las palabras clave top, left, right o bottom para que el navegador calcule de qué borde del cuadro de CSS debe provenir el desplazamiento.

Cuando se usan tres parámetros, una longitud o un valor de CSS pueden ser el segundo o el tercer parámetro, y los otros dos pueden ser palabras clave. La palabra clave que se usa después se usará para determinar el borde al que corresponde la longitud o el valor de CSS como el 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 de CSS, la imagen se coloca en la parte superior del cuadro. El valor 20% representa un desplazamiento del 20% desde 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% desde 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 vinculan con dos valores que corresponden a un desplazamiento en relación 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 al 20% de la parte inferior y al 30% de la derecha del cuadro de CSS.

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

Estos son 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, altura y relación de aspecto intrínsecos (reales).

La propiedad background-size usa valores de longitud y porcentaje 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 se usa auto junto con otro valor de CSS para el ancho (primer parámetro) o la altura (segundo parámetro), el tamaño de 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 ajustó o se recortó.
• contain: Ajusta el tamaño de la imagen para que ocupe todo el espacio sin estirarla ni recortarla. Como resultado, puede quedar espacio vacío que hará que la imagen se repita, a menos que background-repeat se configure como no-repeat.

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

En la siguiente demostración, se muestran estas palabras clave en acción:

Demostración de la aplicación de estas palabras clave a background-size:

Conexión 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 fija la posición de las imágenes de fondo en el viewport.

Una vez que el espacio que ocupan las imágenes de la capa de fondo debe desplazarse (o renderizarse) 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 les permitió ocupar hasta que la vista del 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 mueven a lo largo del espacio que ocupan a medida que ese espacio se renderiza dentro y fuera de los límites del cuadro de CSS (por lo general, debido al desplazamiento, las transformaciones 2D o 3D).

Origen del fondo

La propiedad background-origin te permite modificar el área de los 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 de fondo, 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 a dónde se puede renderizar una capa de fondo de CSS. Cuando se usan estas palabras clave, se recortará cualquier renderización del fondo 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 se extienda más allá del texto dentro del cuadro de contenido. Para que este efecto sea evidente en el texto real dentro de un cuadro de CSS, el texto debe ser parcialmente o completamente transparente.

Es una propiedad relativamente nueva. En el momento de escribir este artículo, Chrome y la mayoría de los navegadores requieren el prefijo -webkit- para usarla.

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.

Los múltiples fondos se definen de arriba abajo. El primer fondo es el más cercano al usuario, mientras que el último es el más alejado.

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

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

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 de background

Para facilitar la aplicación de diseño a la capa de fondo de un cuadro, especialmente cuando se desean varias capas de fondo, existe un atajo 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. 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 estas semánticas de abreviatura en mente, las declaraciones anteriores relacionadas con el segundo plano del fragmento de código se podrían volver a escribir 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 tu comprensión

Pon a prueba tus conocimientos sobre los fondos de CSS