Inicio Atrás Adelante

Imágenes de fondo de página

A partir de la tercera versión de HTML, existe la posibilidad de incluir una imagen como fondo de página. El atributo es BACKGROUND y su valor puede ser un archivo.

Contenido complementario <HTML>
<HEAD>
<TITLE>Primera muestra (con fondo)</TITLE>
</HEAD>
<BODY BACKGROUND="marmol_grey.jpg" >
<H2>Primera página en HTML (con fondo)</H2>
<P>
Esta <B>primera página</B> (con fondo) es bastante corta.
</P>
</BODY>
</HTML>

muestra04.html

O también una URL correspondiente a una imagen:

<HTML>
<HEAD>
<TITLE>Segunda muestra (con fondo)</TITLE>
</HEAD>
<BODY BACKGROUND="http://china.uoc.es:443/affa/gmmd/icons/fons.gif">
<H2>Segunda página en HTML (con fondo)</H2>
<P>
Esta <B>segunda página</B> (con fondo) es bastante corta.
Además, si no se está conectado a Internet, el fondo aparece blanco.
</P>
</BODY>
</HTML>

muestra05.html

Es evidente que si no estamos conectados en el momento de cargar una página con fondo URL, el fondo no se visualizará y aparecerá de color blanco.

Una alternativa es integrar los dos atributos BACKGROUND y BGCOLOR, y en caso de que se pueda cargar la imagen, ésta ocupará el fondo de la ventana. Si esto no es posible, el fondo será ocupado por el color que hayamos determinado en la alternativa BGCOLOR.

<HTML>
<HEAD>
<TITLE>Tercera muestra (con fondo)</TITLE>
</HEAD>
<BODY BACKGROUND="http://china.uoc.es:443/affa/gmmd/icons/fons.gif" BGCOLOR="#F5F5DC">
<H2>Tercera página en HTML (con fondo)</H2>
<P>
Esta <B>tercera página</B> (con fondo) es bastante corta.
Además, si no se está conectado a Internet, no aparece la imagen de fondo.
</P>
</BODY>
</HTML>

muestra06.html

Si el tamaño de la imagen es mayor que la del área de la ventana del navegador que tiene que ocupar, la imagen aparecerá truncada, tal y como ha ocurrido con las dos últimas páginas. En cambio, si la imagen es de menor tamaño, se repetirá a modo de mosaico para tapizar la ventana del navegador.

<HTML>
<HEAD>
<TITLE>Cuarta muestra (con fondo)</TITLE>
</HEAD>
<BODY BACKGROUND="erizo.gif">
<H2>Cuarta página en HTML (con fondo)</H2>
<P>
Esta <B>cuarta página</B> (con fondo) es bastante corta, pero la imagen de fondo está repetida a modo de mosaico.
</P>
</BODY>
</HTML>

muestra07.html

Puesto que las velocidades de descarga acostumbran a ser lentas, es aconsejable utilizar imágenes de pequeño tamaño para los fondos, sobre todo si hay que descargar de un sitio web distinto del que aloja el documento HTML.

Inicio Atrás Adelante Arriba