Fondos de imagen en HTML

  • Por
  • 13 de febrero de 2004
  • Valoración:
  • 16 Comentarios
  • Taller HTML
Explicamos asuntos relativos al uso de fondos de imagen en HTML y ofrecemos algún ejemplo ilustrativo.
En el presente taller vamos a tratar de explicar asuntos relativos al uso de fondos de imagen en HTML. Indicaremos la manera de utilizarlos correctamente, pues los fondos son capaces de lo peor y de lo mejor, es decir, pueden ser tan bonitos y vistosos como feos y molestos, y claro, se trata de quedarnos con la parte buena.

Colocar un fondo en una página web

Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.

<body background="fondo.gif">

Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.

Fondo en otros elementos

No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.

<table background="fondo.gif">

<td background="fondo.gif">

Consejos para utilizar fondos

Veamos ahora algunos consejos que se deberían seguir para una correcta utilización de los fondos de imagen.

1) Colocar un fondo de color parecido a la imagen
Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.

2) Que se puedan leer bien los textos
Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se está utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.

3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.

4) Tener cuidado con las distintas definiciones de pantalla
Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768. Luego accede una persona con una definición de 1280x1024, o superior, y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador. Para entender este punto, puede ser interesante acceder a esta página, que se verá bien en una definición de 800x600 pero mal si es mayor.

5) Hacer un fondo suficientemente grande
Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.

En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentación de la información en la página de una manera clara.

Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.

<html>
<head>
    <title>Fondo de prueba</title>
</head>

<body background="fondo1.jpg" bgcolor="FFCECB">

<table width="550" bgcolor=FFCECB align=center>
<tr>
    <td>

    <h1 style="color:000000">Probando...</h1>
    <br>
    Este texto se lee bien porque tiene un fondo plano.
    <br>

    </td>
</tr>
</table>

</body>
</html>


Se puede ver el ejemplo en funcionamiento en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Lorna

04/12/2007
Aparentemente es tan facil todo, pero no he podido captar la idea, aunque la explicacion esta en terminos simples, o sea, para cualquier persona, pero algo anda mal conmigo, no logro entender la idea.

Gracias.

L.

Julia

13/2/2008
Mi pregunta es: No se puede centrar una imagen de un fondo?

Leonardo

22/5/2009
exelente
me gustaria ser programador de pagina web
fv necesito ayuda de ustedes

ciberjovial

31/7/2009
Gracias
Gracias! me has salvado, ahora podre adornar mi trabajo HTML que tengo que presentar dentro de unas horas xD.
Se agradece

Sara Mejia

24/8/2009
Copia de Fondos en space live
Hola.. tienes conocimiento de como proteger un fondo en el blogs de space live de windows.

gracias

luz

31/8/2009
hola
holacomoestas

mario zegarra pinedo

25/1/2010
Fondo de imagen en página web
muy buen artículo. Felicitaciones al autor.

3267

Manuel

16/3/2010
Bien.
Buscaba solucionar el hecho de que una imagen utilizada como fondo y según la resolución del monitor, el campo es diferente, quisiera que no afectara y se vea siempre lo mismo. El codigo utilizado es:
<style>
body {background-image: url('http://i45.tinypic.com/2le2ed2.png'); background-repeat:
no-repeat; background-position:center center;}
</style>
Si alguien tiene la solución que lo diga.
Gracias.

fdfd1234

18/3/2010
jajajajaja
bien echo

manuel

22/4/2010
COMO DEVO PONER UNA IMAGEN EN LOS FONDOS
lo que quiero saver es que como le hago para insertar imagenes al fondo

belen

25/5/2010
de todo ok
sobre de todo zse trata si

dani

01/7/2010
puto
estas fea la neta sin engañarte nadamas fijat bien

Carlos

14/2/2011
Mas información
Con la etiqueta <Body background="nombredeimagen">Es la forma más sencilla de poner una imagen de fondo, pero casi siempre hay que saber la dirección exacta del directorio donde está ubicada la imágen. Ej:

<body background="Directorio2/directorio3/imagen2">

pipe

26/2/2011
no me sirve
mira que cuando yo pego el codigo de la imagen y pongo .jpg o .gif y todo lo que escribiste, cuando me voy a la pagina web mi fondo aparece en blanco porque

Milagros

09/7/2011
AYUDA URGENTE POR FAVOR
ME PODRÍAN EXPLICAR MÁS EXPLICITA-MENTE COMO AGREGAR UN FONDO DE COLOR Y UN FONDO DE IMAGEN A MI WEB POR FAVOR, GRACIAS MIL.

ypsey

23/7/2012
Fondo en márgenes
Alguien sabe como podría colocar un fondo solamente en los márgenes? mi página web es www.ypsey.com . El fondo es blanco, solo me gustaría cambiar los márgenes con alguna imagen.

Compartir