Cambia el Fondo de tu Página [Jan. 14, 2012, 4:08 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. 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 a primera vista, 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!
-
Background-Image
La manera correcta de insertar imágenes de fondo en una página web es utilizando la propiedad "background-image".