Imagen de fondo que se adapta a la panatalla

Imagen de fondo que se adapta a la panatalla

Imagen de fondo que se adapta a la panatalla

Hola, el tutorial que verán acontinuación es un truco de css, hace algún tiempo haciendo una página me tope con un pequeño inconveniente, como poner una imagen de fondo que se adapte al tamaño de la panatalla, pero que no se distorcione cuando se hace zoom si no más bien que se quede estática y del mismo tamaño, entonces luego de buscar mucho por internet encontre una solución bastante sencilla y que hoy me es de mucha utilidad y se los comparto con ustedes, espero que les sirva.

Si desean ver el ejemplo, click aquí

– Bueno para empezar, ya debes tener la imagen que pondrás como fondo, ten encuenta de que no debe ser muy pequeña pues no queremos que pierda resolución y tampoco muy grande. En mi caso estoy usando una imagen de 1296x792px, ojo esto puedes cambiarlo según tu necesidad.

– Ya en el código HTML, luego de la etiqueta “body” que abre, escribes este código:

HTML

<body>
<div>
     <img id="background" title="" src="images/fondo02.jpg" alt="" />
</div>
<div id="scroller">
     <div id="cabecera">
     </div>
     <div id="contenido">
     <h1>Imagen de fondo que ocupe el del tamaño de la pantalla!</h1>
     Esta es una de las formas de como se puede poner una imagen de fondo que ocupe el 100% de la panatalla y que se adapte a los tamaños, <strong><a href="#">ver tutorial</a></strong>
     Es muy importante tener en cuenta los estilos CSS, position y overflow....etc
     </div>
</div>
</body>

– Hasta ahi, ten en cuenta el primer div donde esta tu imagen y el siguiente que tiene un id=”scroller”, estos dos divs, son los responsables de conseguir este efecto.

– Agregamos el código css.

CSS

html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;}
html, body {overflow:hidden;}
#background{
	position:absolute; 
	z-index:1; 
	width:100%; 
	height:auto;
}
#scroller{
	position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;
}
#cabecera{
	width:700px;
	height:20px;
	text-align:center;
	margin:0 auto;
	overflow:auto;
}

Y eso es todo, espero que les sirva!

Ver ejemplo
Descargar Código

Artículos que también te interesarán

Un comentario en “Imagen de fondo que se adapta a la panatalla

  1. I am speechless. This is a very good blog and rllaey attractive too. Nice work! That’s no longer in reality so much coming from an amateur publisher like me, nevertheless it’s all I may just say after diving into your posts. Great grammar and vocabulary. Not like other blogs. You truly recognise what you?re talking about too. Such a lot that you just made me want to discover more. Your blog has turn out to be a stepping stone for me, my friend.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 

Close