HTML5

Guión y Diseño Multimedia – Curso 2014_15

Referencia de HTML5 – Fondos
(Elaborado a partir de la información obtenida de: http://www.librosweb.es)

El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada
por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y
las zonas de los márgenes siempre sontransparentes.
Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo al
elemento . Si se establece un fondo a la página, como el valor inicial del fondo de los
elementos es transparente, todos los elementos de la página se visualizan con el mismo fondo a menos
que algún elemento especifique su propio fondo.
CSS define cinco propiedades para establecer elfondo de cada elemento (background-color,
background-image, background-repeat, background-attachment, background-position)

y otra

propiedad de tipo "shorthand" (background).
La propiedad background-color permite mostrar un color de fondo sólido en la caja de un elemento.
Esta propiedad no permite crear degradados ni ningún otro efecto avanzado.
Propiedad background-color
Valorescolor | transparent | inherit

Se aplica a Todos los elementos
Valor inicial transparent
Descripción Establece un color de fondo para los elementos
El siguiente ejemplo muestra una página web con un color gris claro de fondo:
body {
background-color: #F5F5F5;
}

Para crear efectos gráficos avanzados, es necesario utilizar la propiedad background-image, que
permite mostrar una imagen comofondo de la caja de cualquier elemento:

Referencia de HTML5 – Fondos - 1

Guión y Diseño Multimedia – Curso 2014_15

Propiedad background-image
Valores

url | none | inherit

Se aplica a Todos los elementos
Valor inicial none
Descripción Establece una imagen como fondo para los elementos
CSS permite establecer de forma simultánea un color y una imagen de fondo. En este caso, laimagen
se muestra delante del color, por lo que solamente si la imagen contiene zonas transparentes es posible
ver el color de fondo.
El siguiente ejemplo muestra una imagen como fondo de toda la página:
body { background-image: url("imagenes/fondo.png") }

Las imágenes de fondo se indican a través de su URL, que puede ser absoluta o relativa. Suele ser
recomendable crear una carpeta de imágenesque se encuentre en el mismo directorio que los archivos
CSS y que almacene todas las imágenes utilizadas en el diseño de las páginas.
Así, las imágenes correspondientes al diseño de la página se mantienen separadas del resto de
imágenes del sitio y el código CSS es más sencillo (por utilizar URL relativas) y más fácil de mantener
(por no tener que actualizar URL absolutas en caso de que secambie la estructura del sitio web).
Por otra parte, suele ser habitual indicar un color de fondo siempre que se muestra una imagen de
fondo. En caso de que la imagen no se pueda mostrar o contenga errores, el navegador mostrará el
color indicado (que debería ser, en lo posible, similar a la imagen) y la página no parecerá que contiene
errores.
Si la imagen que se quiere mostrar es demasiadogrande para el fondo del elemento, solamente se
muestra la parte de imagen comprendida en el tamaño del elemento. Si la imagen es más pequeña que
el elemento, CSS la repite horizontal y verticalmente hasta llenar el fondo del elemento.
Este comportamiento es útil para establecer un fondo complejo a una página web entera. El siguiente
ejemplo utiliza una imagen muy pequeña para establecer unfondo complejo a toda una página:
Imagen original

Referencia de HTML5 – Fondos - 2

Guión y Diseño Multimedia – Curso 2014_15

Reglas CSS
body {
background-image:url(imagenes/fondo.gif);
}

Resultado

Con una imagen muy pequeña (y que por tanto, se puede descargar en muy poco tiempo) se consigue
cubrir completamente el fondo de la página, con lo que se consigue un gran ahorro de...