Como poner background compatible con todas las resoluciones

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.

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;
}

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

pero con media queris tenes que tener un monton de imagenes.... una para cada resolución y además para las distintas proporciones

Utiliza este plugin, en el enlace tienes la demo y todo
http://srobbin.com/jquery-plugins/backstretch/