Volver al índiceFondos

En esta página se explican las propiedades que se pueden aplicar a los fondos de cualquier elemento de una página web:


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-repeat y background-attachment (explicadas más adelante en esta página).

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background: url("gota.png") greenyellow; 
}

        

/* Imagen de fondo gota.png: Imagen de ejemplo para fondo */

Esta celda tiene color de fondo greenyellow y una imagen con transparencia, por lo que el color de fondo sí que es visible.

Volver al principio de la página


Color de fondo: background-color

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

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-color: greenyellow; 
}
El fondo de esta celda es greenyellow.

Volver al principio de la página


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.

Nota: Amaya sí que muestra la imagen de fondo cuando hay espacios en blanco entre url y el paréntesis, pero no debería hacerlo.

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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg"); 
}
El fondo de esta celda es una imagen. Por omisión, los navegadores repiten la imagen en horizontal y vertical hasta ocupar todo el elemento que contiene la imagen de fondo. En el ejemplo siguiente se ve mejor el resultado.
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg"); 
}

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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-color: greenyellow;
background-image: url("verde.jpg"); }
Esta celda tiene color de fondo greenyellow y una imagen sin transparencia, por lo que el color de fondo no es visible.

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

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-color: greenyellow;
background-image: url("gota.png"); }
Esta celda tiene color de fondo greenyellow y una imagen con transparencia, por lo que el color de fondo sí que es visible.
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-color: orange;
background-image: url("gota.png"); }
Esta celda tiene color de fondo orange y la misma imagen con transparencia del ejemplo anterior, por lo que el color de fondo sí que es visible.

Hay que tener cuidado en utilizar la propiedad background-image y no la propiedad compuesta background, 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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-color: orange;
background: url("gota.png"); }
Esta celda tiene color de fondo orange y la misma imagen con transparencia del ejemplo anterior, pero el color de fondo no es visible porque la imagen de fondo está establecida posteriormente con background en vez de background-image.
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background: url("gota.png");
background-color: orange; }
Esta celda tiene color de fondo orange y la misma imagen con transparencia del ejemplo anterior, pero el color de fondo sí es visible porquebackground-color está establecido posteriormente.

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).

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background: url("franja_horizontal.png"); 
}

p {
  background: url("franja_vertical.png"); 
}
        

Esta celda tiene una imagen de fondo con franjas horizontales y este párrafo tiene una imagen de fondo con franjas verticales. En el párrfo se ven tanto unas como otras, pero las franjas verticales se ven encima de las horizontales.

Volver al principio de la página


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.

Los posibles valores de background-repeat son:

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-repeat: no-repeat; }
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-repeat: repeat-x; }
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-repeat: repeat-y; }
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-repeat: repeat; }

Volver al principio de la página


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:

Si se emplean únicamente términos, el orden no es importante:

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-position: right bottom; background-repeat: no-repeat;
}
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-position: bottom right; background-repeat: no-repeat;
}

Si se emplea un único término, se supone que el otro es center.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-position: bottom; background-repeat: no-repeat;
}

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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-position: 50% 100%; background-repeat: no-repeat;
}
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-position: 100% 50%; background-repeat: no-repeat;
}

Si se emplea un único valor numérico, se supone que hace referencia a la posición horizontal y valor ausente es 50%.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-position: 100%; background-repeat: no-repeat;
}

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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome

body { 
  background-image: url("verde.jpg");
background-position: 100% bottom; background-repeat: no-repeat;
}

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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-image: url("verde.jpg");
background-position: bottom 100%;
/* bottom 100% es incorrecto, lo correcto sería decir 100% bottom (primero la posición horizontal y luego la vertical) */ background-repeat: no-repeat;
}

Volver al principio de la página


Atadura 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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
div { 
  background-attachment: scroll;
  background-image: url("verde.jpg");
background-position: right top;
background-repeat: no-repeat;
}
Este cuadro tiene una imagen como fondo. Si el texto no cabe en el cuadro, el navegador muestra unas barras de desplazamiento (en este caso, verticales). Si no ves las barras de desplazamiento, aumenta el tamaño de la fuente o reduce el tamaño de la ventana hasta que aparezcan las barras de desplamiento.

A continuación, desplaza el texto arriba y abajo y verás cómo la imagen se desplaza junto con el texto.

Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido. Este párrafo es para hacer más largo el contenido.

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").

Volver al principio de la página


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.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
body { 
  background-color: lightblue; 
}

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

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

p.con-margen-interior {
  padding: 10px;
}        

Este párrafo tiene una imagen de fondo con una rejilla y color de fondo orange, pero sin margen exterior.

Este párrafo tiene una imagen de fondo con una rejilla y color de fondo orange, pero con margen exterior. El margen exterior es transparente (sin rejilla), por eso se ve de color lightblue.

Este párrafo tiene una imagen de fondo con una rejilla y color de fondo orange, pero con margen interior. El margen interior tiene la rejilla y color de fondo del párrafo.

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 cuadricula de 50x50px ( Cuadricula 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).

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
FF - margin y padding en html y body margin y padding en html y body

Volver al principio de la página

Última modificación de esta página: 11 de noviembre de 2013

Licencia de Creative Commons
Páginas web HTML / XHTML y hojas de estilo CSS por Bartolomé Sintes Marco
se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional (CC BY-SA 4.0).