¿Diferente imagen de fondo dependiendo de la resolución de la pantalla?

Question

¿cuál crees que es la mejor manera de manejar imágenes de fondo en diferentes resoluciones de pantalla?

Estaba pensando en hacer un fondo separado para cada una de las resoluciones más populares y simplemente haga que Jquery cargue la adecuada. También estoy abierto a CSS, gracias a todos :)

Answer 1

Uso media queries:

@media (min-width:800px) { background-image: url(bg-800.jpg) } 
@media (min-width:1024px) { background-image: url(bg-1024.jpg) } 
@media (min-width:1280px) { background-image: url(bg-1280.jpg) } 

Nunca podrá cubrir todos los tamaños posibles, especialmente si considera todos aquellos usuarios cuyos navegadores no son t pantalla completa, por lo que su diseño debe ser un poco flexible para dar cuenta de esto.

Answer 2

Hay un plugin jQuery llamado "backstretch" que se hizo estirar la imagen de fondo para adaptarse al tamaño de la página web. sólo echar un vistazo here

---

Si lo que desea es obtener la resolución de la pantalla y luego decidir qué fondo se cargará, a continuación, estos códigos pueden ser útiles:

var h = screen.height; 
var w = screen.width; 

var BGList = { 
    '1024-768': 'background-url-1.jpg', 
    '1152-864': 'background-url-2.jpg', 
    '1280-600': 'background-url-3.jpg' 
} 

var myBG = BGList[ w+'-'+h ]; 
if (myBG){ 
    document.write("<style> body {background:url('"+myBG+"')} </style>") 
}else{ 
    alert("You have a strange screeen !") //--deal with undefined screen resolution here 
} 

Answer 3

Actualización:

Para el apoyo del navegador cruz, mi respuesta a continuación es el "rodar su propio" método. En los últimos años, sin embargo, se han desarrollado excelentes polyfills para resolver este problema. Por lo general, es una buena idea ir con uno de estos en lugar de rehacer todo ese trabajo. Respond.js es uno de los más conocidos. Solo enlace a él:

<script src="/path/to/respond.js"></script> 

Luego, escriba sus consultas multimedia en su archivo css y listo.

---

Como robertc señaló, las consultas de medios CSS debe ser su punto de partida, pero debe tenerse en cuenta que no son una solución completa a este problema. Desafortunadamente, las consultas de medios css no son compatibles con todos los navegadores (tos IE). El código de consulta de medios en sus archivos css simplemente será ignorado por estos navegadores.

Además de las consultas de css media, consideraría tener una solución de javascript de respaldo que determinará el tamaño de la ventana gráfica, luego simplemente agregue una clase a la etiqueta de cuerpo. En este ejemplo se utiliza jQuery simplemente por razones de brevedad:

function setImageClass() { 
    switch(true) { 
     case($(window).width()>600): $("body").removeClass("w200 w400").addClass("w600"); 
     break; 
     case($(window).width()>400): $("body").removeClass("w200 w600").addClass("w400"); 
     break; 
     default: $("body").removeClass("w400 w600").addClass("w200"); 
     break; 
    } 
} 

$(document).ready(function() { 
    setImageClass(); 
}); 

$(window).resize(function() { 
    setImageClass(); 
}); 

Por cierto, estos tamaños no son realistas, simplemente para facilitar las pruebas en todos los dispositivos. Recuerde, se tendrán en cuenta las preguntas de los medios de CSS, lo que además de esos, es necesario establecer las reglas para las clases que los conjuntos de javascript:

.w200 { background:red } 
.w400 { background:orange } 
.w600 { background:yellow } 

Sin embargo, no quieren las 2 reglas CSS que chocan cuando tanto las consultas como el js funcionan, por lo que sus consultas de medios deben usar los mismos nombres (y se colocarán después). Ejemplo:

@media (min-width:200px) { 
    .w200 { 
     background:red; 
    } 
} 
... 

Puse un violín para mostrar esto en acción. Esto solo incluye la solución de javascript, pero de nuevo, apoyo totalmente las consultas de medios como la solución principal.Here is the full screen link.