Comunidad de diseño web y desarrollo en internet online

Como poner background compatible con todas las resoluciones

Citar            
MensajeEscrito el 06 Jul 2012 03:22 pm
Buenos dias Cristalab, creo este post debido a que tengo un problema,estoy trabajando en un diseño web que requiere tener una imagen de background, y esta debe ser compatible en todas las resoluciones y verse perfectamente ( sin perder la nitidez, sin desproporcionarse, etc). El problema es que la imagen es... "muy especifica" les doy el ejemplo de la primera imagen de fondo:
http://l4c.me/fotos/dante450/fondocs/sizes/o

ya probe varios tutoriales que incluian javascript, jquery, css3 entre otras cosas, pero nada resolvio mi problema de manera que quede perfectamente redimensionada en cada resolucion.

Agradesco mucho cualquier ayuda.

Saludos.

Por dante450

3 de clabLevel



Genero:Masculino  

Webmaster

firefox
Citar            
MensajeEscrito el 06 Jul 2012 04:42 pm
Es imposible que una imagen encaje bien cuando las dimensiones intrinsecas de ésta y la ventana no coinciden. O la imagen se corta o sale sobrando un espacio por debajo (o alguno de los lados) cuando se mantiene la relación de aspecto. O bién se distorsiona en alguno de las dimensiones cuando se intenta cubrir toda la superficie de la ventana. Así que lo que pides es intrinsecamente imposible.

Pero puedes adoptar alguna solución de compromiso. Por ejemplo, la imagen que intentas poner tiene fondo negro. Si pones fondo de color negro al tag HTML y mantienes la relación de aspecto de la imagen, los sobrantes no se notarán. Así es como lo haría yo:

Código CSS :

html {
   margin: 0;
   height: 100%;
   background-color: #000;
   background-image: url("fondo.jpg");
   background-size: 100% auto;
   background-attachment: fixed;
}
body {
   width: 100%;
   height: 100%;
   margin: 0 auto; /* centrado */
   padding: 0;
}

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 06 Jul 2012 04:44 pm
No que va la imagen en diferentes resoluciones se deforma y es mejor tener esa imagen en distintos tamaños o resoluciones para asi usar la medias queris

Por Eclypse

Claber

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Jul 2012 12:28 pm
pero con media queris tenes que tener un monton de imagenes.... una para cada resolución y además para las distintas proporciones

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

firefox
Citar            
MensajeEscrito el 10 Jul 2012 07:03 pm
Utiliza este plugin, en el enlace tienes la demo y todo
http://srobbin.com/jquery-plugins/backstretch/

Por marticps

Claber

103 de clabLevel



Genero:Masculino  

Aprendiz de Todo

chrome

 

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