Cambia el Fondo de tu Página [Jan. 14, 2012, 4:27 p.m.]
Uno de los factores que le da más visibilidad a una página web es el uso de colores e imágenes de fondo, especialmente para secciones como el encabezado y pie de página.
Por ejemplo, digamos que queremos que nuestro encabezado quede de esta manera:
Una opción sería insertar una imagen utilizando HTML, de esta forma:
<html>
<head>
<title>Trisfera</title>
<meta charset=”utf-8” />
</head>
<body>
<div style="text-align:center">
<img src="encabezado.png" alt="encabezado" />
</div>
</body>
</html>
Sin embargo, si abrimos esta página en el navegador, podremos identificar dos grandes problemas:
-
La imagen no se ajusta al tamaño del navegador
Si achicamos nuestro navegador, nos daremos cuenta que el logo y slogan quedan cortados y tenemos que hacer scroll hacia la derecha para verlos. De igual forma, si expandimos el navegador al tamaño máximo, veremos que quedan espacios en blanco a ambos lados de la imagen (si tu monitor no es muy grande, tal vez no lo veas).
-
El slogan está incrustado en la imagen
Tal vez este problema sea menos evidente, pero pensemos un poco en las consecuencias:-
Si más adelante cambia el slogan de la página, tendríamos que buscar la imagen original, editarla, exportarla y luego caerle encima a la imagen anterior. En cambio, si el slogan estuviera como texto, solo tendríamos que abrir el archivo HTML y modificarlo con nuestro editor de texto.
-
Los buscadores (Google, Yahoo, Bing, etc.) no pueden leer texto si está incrustado dentro de una imagen. Esto significa que si alguien entra a Google y escribe tu slogan, ¡tu página no aparecerá entre los resultados!
-
Si más adelante cambia el slogan de la página, tendríamos que buscar la imagen original, editarla, exportarla y luego caerle encima a la imagen anterior. En cambio, si el slogan estuviera como texto, solo tendríamos que abrir el archivo HTML y modificarlo con nuestro editor de texto.
Background
La manera correcta de insertar imágenes de fondo en una página web es utilizando la propiedad "background". Te recomendamos leer esta página para que conozcas a fondo cómo funciona esta propiedad.