Immagine di sfondo diversa a seconda della risoluzione dello schermo?

Question

quale pensi sia il modo migliore per gestire le immagini di sfondo su diverse risoluzioni dello schermo?

Stavo pensando di creare uno sfondo separato per ciascuna delle risoluzioni più popolari e di caricare semplicemente Jquery. Sono aperto anche ai CSS, grazie a tutti :)

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

Non sarai mai in grado di coprire ogni singola dimensione possibile, soprattutto se consideri tutti quegli utenti i cui browser non sono " t schermo intero, quindi il tuo design dovrebbe essere un po 'flexible per tener conto di ciò.

Answer 2

C'è un plugin jQuery chiamato "backstretch" che è stato reso estendibile all'immagine di sfondo per adattarsi alle dimensioni della pagina web. Basta dare un'occhiata here

---

Se si desidera solo per ottenere la risoluzione dello schermo poi decidere quale sfondo verrà caricata, quindi questi codice può aiutare:

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

Aggiornamento:

Per il supporto cross browser, la mia risposta qui sotto è il "Rullino proprio" metodo. Nel corso degli ultimi due anni, tuttavia, sono stati sviluppati eccellenti polifi- cienti per risolvere questo problema. Di solito è una buona idea andare con uno di questi piuttosto che rifare tutto quel lavoro. Respond.js è uno dei più noti. Basta collegarlo ad esso:

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

Quindi scrivere le query multimediali nel file css e il gioco è fatto.

---

Come robertc ha sottolineato, di media query CSS dovrebbe essere il punto di partenza, ma va notato che non sono una soluzione completa a questo problema. Sfortunatamente, le media query di css non sono supportate su tutti i browser (tosse IE). Il codice di query multimediale nei tuoi file css verrà semplicemente ignorato da questi browser.

Oltre alle query sui supporti CSS, prenderei in considerazione l'idea di disporre di una soluzione javascript di backup che determinerà le dimensioni della finestra, quindi aggiungere semplicemente una classe al tag body. Questo esempio utilizza jQuery semplicemente per brevità:

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

Btw, queste dimensioni non sono realistici, semplicemente per un facile test su tutti i dispositivi. Ricordate, le media query CSS verranno ignorati, così oltre a quelli, è necessario impostare le regole per le classi che i set di javascript:

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

Tuttavia, non vogliono le regole CSS 2 in collisione quando entrambe le query e i j funzionano, quindi le tue query multimediali dovrebbero utilizzare gli stessi nomi (e posizionarle successivamente). Es .:

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

Ho alzato un violino per mostrarlo in azione. Questo include solo la soluzione javascript, ma, ancora una volta, supporto pienamente le query multimediali come soluzione principale.Here is the full screen link.