Imagen de fondo sin que le afecte el zoom

#1 (**permalink**) 01/04/2013, 09:31

Hola! Visitando la página web de Massimo Dutti (http://www.massimodutti.com/) me he dado cuenta que al hacer zoom en el navegador la imagen de fondo no se ve afectada, siendo únicamente disminuido o aumentado el menú de la izquierda y el footer.

¿Cómo se puede conseguir esto?

Un saludo!

PD: Que no solo no le afecte el zoom, sino que al minimizar la pantalla de tamaño tampoco le afecte.

kraneok · #2 (**permalink**) 01/04/2013, 10:31

Con CSS supongo que sería utilizando un DIV que mantenga la imagen como fixed y que cubra siempre el 100% del display donde se muestra.
Claro que CSS como HTML es generado y enviado desde el servidor por lo que se debería modificar el tamaño del div mediante javascript.

alexk · #3 (**permalink**) 01/04/2013, 10:37

http://ksesocss.blogspot.com/2012/04...-al-viejo.html

#4 (**permalink**) 01/04/2013, 11:48

Hola a los dos, creo que se más o menos la forma teórica de hacerlo, no obstante es algo compleja para ser un simple fondo, la idea sería en primer lugar poner el fondo a 100% de anchura y altura, sin márgenes y con posición fija o absoluta. Hasta aquí tendríamos solucionado el problema del zoom, pues siempre ocuparía todo el espacio. Para solucionar el problema de la distorsión lo que se haría sería mediante un javascript captar la resolución disponible en cada usuario y ponerla como altura y anchura mínima. No obstante no es tan fácil puesto que un simple zoom cambiaría este valor y tendría que volver a ser establecido, mediante algún evento o algo similar.

Seguro que hay algún método más fácil, a ver si alguien lo tiene y lo soluciona.

Un saludo y gracias por las respuestas!

pzin · #5 (**permalink**) 01/04/2013, 14:11

En realidad no tiene mayor misterio que usar background-size —no he mirado la página, igual lo hacen de alguna otra forma más compleja.

Código CSS:

Ver originalbackground-size: 100%
background-size: cover
etc...