Cómo trabajar con fondos de imagen en HTML, con ejemplos de código para usar imágenes de fondo en páginas web.
En el presente taller de HTML 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. Por supuesto, se trata de quedarnos con la parte buena!
Pero antes de empezar, cabe recordar que HTML es un lenguaje que use debe usar para expresar el contenido de las páginas web. Sin embargo, el tema de los fondos es algo relativo a la presentación, por lo que lo lógico sería usar CSS para integrarlos. Al final de este artículo te explicaremos también cómo colocar el fondo usando CSS, así podrás aprender las dos partes.
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">Estos dos elementos (tablas y celdas), junto con el propio cuerpo de la página, eran los que permitían fondos en la web antes de existir el lenguaje CSS. Pero hoy, como veremos enseguida, con CSS podemos colocar fondos en casi cualquier elemento que tengas en tu página.
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 dimensiones reducidas. Luego accede una persona con una definición de monitores de alta gama y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador.
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. Por supuesto, el buen gusto y el sentido común ayudarán bastante.
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>Fondos de imagen con CSS
Como habíamos dicho, antes de existir el lenguaje CSS, la única manera de conseguir poner fondos en las páginas web era con HTML. Sin embargo, ha pasado ya mucho tiempo desde entonces.
Hoy lo correcto es usar solamente el lenguaje CSS para colocar un fondo en una página web, ya sea como fondo en toda la página o como fondo en un elemento concreto.
Si no conocemos CSS podemos aprender en el Manual de CSS de DesarrolloWeb. En ese manual aprenderemos que existen varias maneras de aplicar estilos CSS a un documento HTML. También conoceremos varios de los atributos de las CSS, al menos los más importantes. Sin ese conocimiento de base es complicado entender los ejemplos que vamos a ver, al menos completamente, pero vamos allá.
Fondo para toda la página
En CSS podemos colocar el fondo a toda la página con el selector "body", que sirve para darle estilo a la etiqueta BODY.
body {
background-color: #ffdd90;
background-image: url("mi-imagen.jpg");
}En el código anterior estamos expresando un fondo de color sólido, junto con un fondo de archivo gráfico llamado "mi-imagen.jpg".
Lo bueno de las CSS es que nos permiten colocar no solo el fondo de una imagen, con un archivo gráfico, sino además decir si queremos que ese fondo se coloque con forma de mosaico, si queremos que tenga unas dimensiones dadas, un desplazamiento, etc.
El código para colocar el fondo sobre un elemento cualquiera de la página es prácticamente el mismo. Por ejemplo, así estaríamos colocando un fondo de imagen sobre todos los párrafos de la página.
p {
background-color: #309d20;
background-image: url("otro.png");
}Conclusión sobre el uso de fondos de imagen
Esperamos que se hayan aclarado tus dudas iniciales sobre el uso de fondos en páginas web. Hemos aprendido varias maneras de usar fondos, pero recuerda que lo más adecuado sería implementarlos mediante CSS.
Te recomendamos la lectura del artículo Fondos con CSS para obtener más información sobre cómo usar distintos tipos de fondos, de imágenes o degradados. Además existen infinidad de artículos en DesarrolloWeb.com donde tratamos también el uso de fondos. Puedes aprender a colocar múltiples imágenes de fondo sobre un elemento. usar fondos con transparencia (semitransparentes), posicionar el fondo dentro del elemento (para que se vea justo la parte que quieres) o usar fondos con degradados, entre muchas otras informaciones que encontrarás dentro de nuestros artículos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...