Comunidad de diseño web y desarrollo en internet online

Fondo de pagina a pantalla completa

Citar            
MensajeEscrito el 27 Abr 2010 07:26 pm
Hola!! tengo un problema, necesitaría que el fondo de la web que estoy haciendo sea una imagen a pantalla completa y cuando se redimencione siempre ocupe el total de la ventana, no importa si corta la imagen lo que no quiero es que se deforme y pierda la relación de aspecto. Dejo un ejemplo que aunque esta hecho en flash es un efecto similar al que me gustaria conseguir.

http://dieantwoord.com/index.html

Por sgerman7

48 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 28 Abr 2010 03:25 am
Si la ponés como fondo del body no tendría por qué deformarse... además, eso que estás viendo es diagramación líquida en Flash. Es otra cosa.

Por king-size

25 de clabLevel



 

Rosario, Argentina

firefox
Citar            
MensajeEscrito el 28 Abr 2010 03:18 pm
Estimado lo que tendrias que hacer...es cargar varias imagenes con los tamaños de resolucion de pantalla mas usados...luego con javascript detectar la resolucion de pantalla que el usuario del sitio web tenga, y con condificonales cargar los distintos css...la idea es que tengas un css para distintas resoluciones de pantalla...en cada css cargaras en el body la imagen segun resolucion de pantalla y le pondras width y height al 100%

saludos

Por ipraetoriux

18 de clabLevel



Genero:Masculino  

Ingeniero en Software

firefox
Citar            
MensajeEscrito el 28 Abr 2010 03:45 pm

ipraetoriux escribió:

Estimado lo que tendrias que hacer...es cargar varias imagenes con los tamaños de resolucion de pantalla mas usados...luego con javascript detectar la resolucion de pantalla que el usuario del sitio web tenga, y con condificonales cargar los distintos css...la idea es que tengas un css para distintas resoluciones de pantalla...en cada css cargaras en el body la imagen segun resolucion de pantalla y le pondras width y height al 100%

saludos


Esto es lo primero que se me ocurrio pero lo descarte porque no solo quiero que se adapte a la resolucion de la pantalla sino mas bien a la de la ventana del navegador actual, he encontrado un hilo que me ha orientado y estoy cerca de conseguir el efecto deseado, ni bien lo tengo publicare el enlace, muchas gracias por tu respuesta

Por sgerman7

48 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 29 Abr 2010 12:25 am

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

chrome
Citar            
MensajeEscrito el 29 Abr 2010 04:01 am

drarock escribió:

CSS3 ofrecerá propiedades que ayudarán a ese efecto que buscas, pero hasta entonces puede usar este script que hace lo mismo

http://www.buildinternet.com/project/supersized/


Gracias, este es el efecto que buscaba de hecho estaba ya estudiandome este script para ver realmente como funciona y que opciones ofrece, cuando lo tenga listo ya os avisare

Por sgerman7

48 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 26 Jul 2010 02:09 pm
todo perfecto, ya esta solucionado!!! Muchas Gracias!!!!

Por sgerman7

48 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 27 Jul 2010 06:23 pm
Se que esta solucionado, pero para próximas búsquedas, también puedes usar una imagen (<img />) en el html darle width=100% y height=100% y ponerle posición absoluta top=0 y left=0 y un zIndex inferior a el resto de elementos :)

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

opera
Citar            
MensajeEscrito el 27 Jul 2010 06:28 pm

J O S escribió:

Se que esta solucionado, pero para próximas búsquedas, también puedes usar una imagen (<img />) en el html darle width=100% y height=100% y ponerle posición absoluta top=0 y left=0 y un zIndex inferior a el resto de elementos :)


esta fue mi primera opción, pasa que se deformaba con el tamaño de la ventana y lo que quería era que mantuviera la relación de aspecto y no se deformara, lo logre con jquery, gracias....

Por sgerman7

48 de clabLevel



Genero:Masculino  

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.