CSS: Fondos

En esta página se explican las propiedades que se pueden aplicar a los fondos de cualquier elemento de una página web. Algunas de estas propiedades ya formaban parte de la recomendación CSS 2.1 y otras se han introducido en la futura recomendación CSS 3: Fondos y bordes. Aunque actualmente (diciembre de 2016) esta recomendación se encuentra en elaboración, los navegadores aceptan ya estas propiedades, por lo que pueden utilizarse sin problemas.

Cualquier imagen puede utilizarse de imagen de fondo. Para adaptarse a los diferentes tamaños de pantallas y mantener las imágenes lo más pequeñas posibles, si el elemento es mayor que la imagen, las imágenes se suelen repetir. Si la imagen está bien construida, la repetición puede dar un resultado contínuo.

Imagen de fondo: Imagen de ejemplo para fondo
ERROR (no puede mostrarse el objeto)
Enlace externo
Imagen de fondo: Imagen de ejemplo para fondo
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: En la lección Generadores de fondos se comentan varias aplicaciones y páginas web que facilitan la creación de imágenes de fondo.

La propiedad compuesta background

La propiedad compuesta background permite definir simultáneamente todas las propiedades relacionadas con el fondo de cualquier elemento: background-color, background-image, background-position, background-size, background-repeat, background-attachment, background-origin y background-clip (explicadas más adelante en esta página).

html {
  background: lightblue url("caballo.svg");
}
/* Imagen de fondo caballo.svg: Imagen de ejemplo para fondo */
ERROR (no puede mostrarse el objeto)
Enlace externo

Para evitar ambigüedades, si se especifica la propiedad background-size, inmediatamente antes se debe especificar la propiedad background-position y antes de background-size hay que escribir una barra (/).

html {
   background: lightblue url("caballo.svg") top left / 100px;
}
/* Imagen de fondo caballo.svg: Imagen de ejemplo para fondo */
ERROR (no puede mostrarse el objeto)
Enlace externo

Si sólo se escribe un valor de background-origin y background-clip, ese valor se aplica a las dos propiedades.

Imágenes de fondo múltiples

La futura recomendación CSS 3: Fondos y bordes, actualmente (diciembre de 2016) en elaboración, permite definir varias imágenes de fondo en un mismo elemento, simplemente separando entre comas las referencias a cada imagen.

html {
  background: url("fuego_1f525.svg") right repeat-y, url("tartan.png");
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La notación de valores separados por comas se puede utilizar tanto en la propiedad compuesta background como en las propiedades individuales. Si sólo se especifica un valor, ese valor se aplica a todas las imágenes.

html {
  background-image: url("fuego_1f525.svg"), url("tartan.png");
  background-position: right;
  background-repeat: repeat-y, repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El orden de las imágenes es de delante hacia atrás, es decir, la primera imagen de la lista está por encima de la segunda y así sucesivamente. El orden es importante pues si una imagen no tiene transparencia tapará las siguientes. En el ejemplo siguiente el fondo que asemeja una tela oculta la imagen del fuego:

html {
  background: url("tartan.png"), url("fuego_1f525.svg") right repeat-y;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Sólo se puede definir un color de fondo en la última de las imágenes de fondo. No solamente porque dar color de fondo a cualquier otra imagen ocultaría las que se encuentran por detrás, sino porque la recomendación no lo permite.

Correcto
html {
  background: url("rosa_1f339.svg") top left repeat-y,
    hsl(105, 80%, 85%) url("tulipan_1f337.svg") top right repeat-y;
  padding: 0 70px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Incorrecto
html {
  background: hsl(105, 80%, 85%) url("rosa_1f339.svg") top left repeat-y,
    url("tulipan_1f337.svg") top right repeat-y;
  padding: 0 70px;
  /* No es correcto poner color de fondo a una imagen de fondo
     que no sea la última.
  */
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Para saber más: http://helephant.com/2009/11/23/css3-multiple-background-images/.

Color de fondo: background-color

La propiedad background-color establece el color de fondo de cualquier elemento.

html {
  background-color: palegreen;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El color de fondo se muestra por detrás de la imagen, por lo que la imagen debe tener transparencia para que se pueda ver el color de fondo.

html {
  background: #FFDF85 url("fuego_1f525.svg");  }
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background: #FFDF85 url("tartan.png"); }
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Imagen de fondo: background-image

La propiedad background-image establece cualquier imagen como fondo de un elemento. La sintaxis es la siguiente background-image: url("nombre_de_la_imagen"), en la que el nombre de la imagen debe indicar el nombre (y la extensión) de la imagen, así como el camino absoluto o relativo desde la hoja de estilo. Las comillas que rodean el nombre de la imagen sólo son necesarias si hay espacios en blanco en el nombre de la imagen. Se pueden utilizar comillas simples (') o dobles ("). Si hay espacios en blanco entre url y el paréntesis, los navegadores no muestran la imagen de fondo.

En el ejemplo siguiente, se utiliza la imagen siguiente: Imagen para fondo. Esta imagen se llama verde.jpg y se encuentra en la misma carpeta que la hoja de estilo.

html {
  background-image: url("verde.jpg");
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("verde.jpg");
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si en un elemento tiene tanto color de fondo como imagen de fondo, la imagen se sitúa por encima del color. Si la imagen no contiene píxeles transparentes, el color de fondo no se ve.

html {
  background-color: palegreen;
  background-image: url("verde.jpg");
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Pero si la imagen contiene píxeles transparentes se ve el color de fondo:

html {
  background-color: limegreen;
  background-image: url("gota.png");
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-color: orange;
  background-image: url("gota.png");
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Se aconseja utilizar o bien solamente la propiedad compuesta background o bien las propiedades individuales. Si se utiliza la propiedad compuesta background y además las propiedades individuales, es necesario escribir primero la propiedad compuesta, ya que la propiedad background anula las propiedades de fondo anteriores. En el primer ejemplo siguiente, no se ve el color orange porque la propiedad background anula la propiedad background-color anterior. En el segundo ejemplo, sí que se ve el color orange porque la propiedad background-color está después de la propiedad background.

html {
  background-color: orange;
  background: url("gota.png");
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background: url("gota.png");
  background-color: orange;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Se pueden superponer las imágenes de fondo de varios elementos anidados (las imágenes de fondo de los elementos exteriores se verán si las imágenes de fondo de los elementos interiores contienen píxeles transparentes).

html {
  background: url("franja_horizontal.png");
}

p {
  background: url("franja_vertical.png");
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Tamaño de la imagen de fondo: background-size

La propiedad background-size permite establecer el tamaño de la imagen de fondo.

Los posibles valores de la propiedad background-size son:

Si la imagen de fondo es una imagen de mapa de bits (jpg, png, etc.) y se aumenta, la calidad de la imagen se resiente. Sin embargo, si se utilizan imágenes en formato vectorial (SVG), la imagen se verá con la misma calidad independientemente del tamaño:

html {
  background-image: url("circulo.svg");
  background-size: auto auto;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("circulo.svg");
  background-size: 33% 50%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("circulo.svg");
  background-size: 33% 50%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("circulo.svg");
  background-size: 50px 50px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("circulo.svg");
  background-size: contain;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("circulo.svg");
  background-size: contain;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("circulo.svg");
  background-size: cover;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Repetición de la imagen de fondo: background-repeat

Por omisión, los navegadores repiten la imagen de fondo tanto en vertical como en horizontal. La propiedad background-repeat permite controlar esa repetición.

En la recomendación CSS 2.1, los posibles valores de background-repeat son:

La futura recomendación CSS 3: Fondos y bordes, actualmente (diciembre de 2016) en elaboración, ha añadido los valores:

html {
  background-image: url("verde.jpg");
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("verde.jpg");
  background-repeat: repeat-x;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("verde.jpg");
  background-repeat: repeat-y;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image: url("verde.jpg");
  background-repeat: repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image:  url("circulo.svg");
  background-repeat: repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image:  url("circulo.svg");
  background-repeat: space;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image:  url("circulo.svg");
  background-repeat: round;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
html {
  background-image:  url("circulo.svg");
  background-repeat: round;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El valor space introducido en CSS 3 tiene sentido con imágenes que no pretenden crear un fondo continuo, ya que el espacio sobrante se distribuye entre las imágenes.

Posición de la imagen de fondo: background-position

La propiedad background-position permite establecer la posición de la imagen de fondo. A esta propiedad hay que darle dos valores: la posición horizontal y la posición vertical.

Los posibles valores de background-position son:


Hay que tener en cuenta que la imagen de fondo se posiciona respecto al elemento y que el tamaño de los elementos puede estar definido explícitamente o definido por su contenido.


Con respecto a los valores de background-position (posición horizontal y vertical), si se emplean únicamente términos, el orden de los valores no es importante:

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: right bottom;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: bottom right;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si sólo se indica una de las posiciones, la otra toma el valor center.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: right;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si se emplean únicamente valores numéricos, el primer valor hace referencia a la posición horizontal y el segundo a la posición vertical.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: 100% 50%;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Si se emplea un único valor numérico, se interpreta como posición horizontal y valor ausente es 50%.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: 100%;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

La recomendación CSS 2 del W3C no permitía mezclar números y palabras, pero la recomendación CSS 2.1 sí que permite mezclar números y palabras, aunque obligan a que el primer término se refiera a la posición horizontal y el segundo a la vertical.

En el ejemplo siguiente los navegadores muestran la imagen correctamente, abajo a la derecha.

div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: 100% bottom;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

En el ejemplo siguiente los navegadores muestran la imagen de fondo arriba a la izquierda porque no hacen caso de la propiedad background-position, puesto que la propiedad background-position del ejemplo no es válida.

Incorrecto
div {
  width: 98%;
  height: 10em;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;

  background-image: url("verde.jpg");
  background-position: 100% bottom;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Ligadura de la imagen de fondo: background-attachment

La propiedad background-attachment establece el comportamiento de la imagen de fondo cuando se desplaza el elemento (al utilizar las barras de desplazamiento del navegador).

Los posibles valores de background-attachment son:

El valor scroll hace que la imagen acompañe al elemento y se puede aplicar en cualquier elemento.

html {
  background-attachment: scroll;
  background-image: url("verde.jpg");
  background-position: right top;
  background-repeat: no-repeat;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El valor fixed hace que la imagen permanezca fija en la ventana y no se desplace cuando se desplaza el elemento. Pero además la posición de la imagen de fondo se interpreta siempre con respecto a la ventana y únicamente es visible cuando el elemento está en esa posición.

La página de ejemplo de imagen de fondo con background-attachment: fixed permite entender lo que ocurre. En esta página la imagen de fondo es una rejilla de 200px x 200px. Esa imagen está como imagen de fondo en dos elementos: <body> y los dos primeros párrafos <p> (con clase "confondo").

Extensión del fondo: background-clip

La propiedad background-clip permite definir la zona en la que aparece el fondo (color o imagen).

Los posibles valores de la propiedad background-clip son:

p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-color: lightblue;

  background-clip: border-box;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-color: lightblue;

  background-clip: padding-box;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-color: lightblue;

  background-clip: content-box;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Posición del origen del fondo: background-origin

La propiedad background-origin permite definir la zona en la que se sitúa el origen de la posición del fondo. Hay que tener en cuenta que una vez definido el origen de la imagen, esta puede repetirse en todo el esapcio disponible (al que afecta la propiedad background-clip).

Los posibles valores de la propiedad background-origin son:

En los ejemplos siguientes, el origen de la imagen de fondo va cambiando, pero la imagen se repite en todo el párrafo (borde incluido).

p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula_transp.png");
  background-color: lightblue;

  background-origin: border-box;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula_transp.png");
  background-color: lightblue;

  background-origin: padding-box;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 10px dotted;
  margin: 20px;
  padding: 20px;
  background-image: url("cuadricula_transp.png");
  background-color: lightblue;

  background-origin: content-box;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Imagen de fondo y márgenes exteriores e interiores

Salvo para el elemento <html>, las imágenes de fondo se colocan del borde para adentro del elemento, es decir, que:

En el caso de repetición de la imagen de fondo, la posición inicial de la imagen es la esquina superior izquierda y se repite a partir de esa posición.

html {
  background-color: lightblue;
}

p {
  background: url("../cuadricula.png");
  background-color: orange;
}

p.con-margen-exterior {
  margin: 10px;
}

p.con-margen-interior {
  padding: 10px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

En el caso del elemento <html> con margen exterior, las imágenes o colores de fondo también se muestran en el margen exterior. La posición inicial de la imagen sigue siendo la esquina superior izquierda, pero la imagen se repite "hacia atrás" para cubrir el margen exterior, como puede comprobarse en la siguiente página de ejemplo o en las siguientes capturas de pantalla de esa página en Firefox. En esa página de ejemplo, la imagen de fondo es una cuadrícula de 50x50px (Cuadrícula transparente) y tanto <html> como <body> tienen un margin y padding de 10px, por lo que espacio alrededor del contenido es de 40px en total (10px+10px+10px+10px).

FF - margin y padding en html y body margin y padding en html y body