Gracias por seguir Google I/O. Mira contenido a pedido.

Se usó la API de Cloud Translation para traducir esta página.

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

Navegadores compatibles

Origen

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

Navegadores compatibles

Origen

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

Navegadores compatibles

Origen

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

Navegadores compatibles

Origen

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:

Qué debes hacer

background-position: left 50%;

Qué debes hacer

background-position: top left;

Qué debes hacer

background-position: left top;

El orden no importa para las palabras clave asociadas con diferentes ejes de posición.

Qué no debes hacer

  background-position: 50% left;

Cuando se utilizan valores de CSS junto con las palabras clave, el orden es importante. El primer valor representa el eje horizontal y el segundo, el eje vertical.

Qué no debes hacer

  background-position: left right;

No puedes usar palabras clave asociadas con el mismo eje de forma simultánea.

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.

Qué debes hacer

background-position: bottom 88% right;

Qué debes hacer

background-position: right bottom 88%;

Qué no debes hacer

background-position: 88% bottom right;

El valor de longitud de CSS debe estar precedido por las palabras clave top, right, bottom o left cuando se usan tres o más parámetros.

Qué debes hacer

background-position: bottom 88% right 33%;

Qué debes hacer

background-position: right 33% bottom 88%;

Qué no debes hacer

background-position: 88% 33% bottom left;

El valor de longitud de CSS debe estar precedido por las palabras clave top, right, bottom o left cuando se usan tres o más parámetros.

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

Navegadores compatibles

Origen

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

Navegadores compatibles

Origen

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

Navegadores compatibles

Origen

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

Navegadores compatibles

Origen

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.

Navegadores compatibles

Origen

Nota: Esta propiedad no es compatible con la configuración simultánea de background-clip: text en un cuadro CSS.

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

Las imágenes de fondo se ubican en la parte superior izquierda de un cuadro CSS.

Verdadero

Correcto.

Falso

Según su tamaño intrínseco, es posible que una imagen parezca no estar en la esquina superior izquierda de un cuadro CSS, background-position debe usarse explícitamente para cambiar la posición predeterminada de una imagen de fondo.

Las imágenes de fondo no se repiten de forma predeterminada.

Falso

Se debe usar background-repeat: no-repeat explícitamente para no repetir una imagen de fondo. Además, se pueden usar background-repeat: repeat-x y background-repeat: repeat-y para evitar que se repitan en el eje específico.

Verdadero

Correcto.

¿Cuáles de las siguientes declaraciones background-position son válidas?

background-position: 50% left

Cuando se utilizan valores de CSS con palabras clave, el orden de los valores es importante.

background-position: top right 33%

Esto coloca una imagen de fondo en la parte superior de un cuadro y un 33% desde el borde derecho del cuadro.

background-position: right bottom

De esta manera, se posicionará una imagen de fondo en el extremo derecho y en la parte inferior de un cuadro. La posición de diferentes ejes se puede nombrar en cualquier orden.

background-position: left

Esto posiciona una imagen de fondo de modo que quede a la izquierda del cuadro y centrada verticalmente. Cuando se proporciona solo una posición de un eje, la imagen de fondo se centra en el eje opuesto.

Para definir una imagen de fondo que se fijará en un viewport, usa lo siguiente:

background-position: fixed

"Este valor no es válido para la propiedad background-position".

background-fixed-to-viewport: true

background-fixed-to-viewport aún no existe en CSS.

background-attachment: fixed

background-attachment: fixed establece de manera explícita que la imagen de fondo se fijará en el viewport actual.

background-attachment: scroll

"background-attachment" es la propiedad que se usa para definir que una imagen de fondo se fije en un viewport. Sin embargo, scroll es el valor predeterminado para la propiedad que corrige la imagen de fondo de forma predeterminada en el cuadro que no se verá afectado por el contenido dentro del cuadro.

El origen de fondo predeterminado de un fondo dentro de un cuadro CSS es el siguiente:

content-box

Valor válido para background-origin, pero no es el predeterminado.

border-box

El valor válido para background-origin y los bordes establecidos previamente se pueden pintar sobre los fondos, pero no es el valor predeterminado.

padding-box

Es el valor predeterminado de background-origin. Permite que el fondo se renderice más allá del contenido y hasta el borde de un cuadro.

margin-box

Si bien se reconoce una región de un cuadro CSS, no es un valor válido para la propiedad background-origin.

Fondos

Podcast de CSS - 053: Antecedentes

Fondos

Color de fondo

Imágenes de fondo

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

Fondos del gradiente de CSS

Repetición de imágenes de fondo

Posición en segundo plano

Tamaño del fondo

Archivo adjunto en segundo plano

Origen en segundo plano

Clip de fondo

Varios fondos

La abreviatura del fondo

Verifica tus conocimientos

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