Imagen que ocupe siempre el ancho de pantalla

pabloe9k · #1 (**permalink**) 18/09/2009, 07:38

Genios del foro!!
Los estoy convocando porque no se como hacer lo siguiente:

Quiero colocar una imagen como banner, arriba de la página, y me gustaría que ocupe todo el ancho de navegador, redimensionándose para seguir ocupando todo el ancho de la pantalla cuando se achique o se agrande la ventana del navegador.

Porque, en mi escaso conocimiento, se me ocurrió hacer una imágen de 2000px de ancho, pero aparece abajo la barra de scroll (y colocar código para desaparecer la barra de scroll no es una opción).

Espero puedan ayudarme.
Muchas gracias!!

Se les ocurre algo?
Muchas gracias...!!

ElJavista · #2 (**permalink**) 18/09/2009, 07:43

Si, eso de colocar código que desaparesca la barra de scroll horizontal no es una opción porque no se puede hacer, esa barra la coloca el explorador y no puede ser manipulada con ningún código (al menos no puede ser eliminada). Lo que yo te recomiendo en primera instancia es que hagas tu web de un ancho determinado, 960 píxeles es lo que sugiere. Si no quieres seguir esa opción podría sugerirte que le des un ancho porcentual a tu banner, <img width="100%" ... no es algo que suelo recomendar ni emplear así que no estoy seguro si servirá o si hace falta un doctype determinado para que funcione y es que no es la opción que creo sea más recomendable. De todas maneras te reitero el consejo de hacerlo usando un ancho fijo.

pabloe9k · #3 (**permalink**) 18/09/2009, 07:46

Me podrías pasar el código para darle un ancho fijo a la página, entonces?
Gracias!!

ElJavista · #4 (**permalink**) 18/09/2009, 08:57

Entonces debe ser que solo usas editores gráficos. Bueno, este es el código:

<body>
<div style="width: 960px; margin-left: auto; margin-right: auto">
[tu contenido]
</div>
</body>

Como verás, tendrás que "envolver" todo tu código que se encuentre dentro de las etiquetas <body> y </body> con un div que tenga esos estilos, eso funcionará.

pabloe9k · #5 (**permalink**) 18/09/2009, 08:58

Cita:

Iniciado por ElJavista

Entonces debe ser que solo usas editores gráficos. Bueno, este es el código:

<body>
<div style="width: 960px; margin-left: auto; margin-right: auto">
[tu contenido]
</div>
</body>

Como verás, tendrás que "envolver" todo tu código que se encuentre dentro de las etiquetas <body> y </body> con un div que tengas esos estilos, eso funcionará.

Gracias, fenómeno!!!
Saludos.