Olika bakgrundsbild på olika skärmar?

[fickler]

Hej!

 

Jag har ett problem. Har en bakrgundsbild som är beroende av upplösningen på sidan och måste därför anpassas så den fyller hela bredden. Har googlat och hittat ett script som jag tycker borde funka, men bilderna dyker inte upp.. Någon som förstår varför??

var i,
res = [2560,1920,1600,1440,1366,1280,1152,1024];
for (i=0; i<res.length; i++) {
   if (screen.width >= res[i]) {
    document.body.style.backgroundImage = 'url(http://www.fickler.com/lemans/images/bakgrunder/bg' + res[i] + '.jpg)';
    break;
  }
}

Har bilderna i mappen images/bakgrunder/ i varje upplösning som listas..

 

Tack på förhand!

 

//fickler

[Jonas__B]

Tips är att skapa classer i css-filen med olika styles och beroende på upplösning sätta olika classer.

var i,
res = [2560,1920,1600,1440,1366,1280,1152,1024];
for (i=0; i<res.length; i++) {
   if (screen.width >= res[i]) {
    var d = document.body;
    d.className = d.className + " w_"+res[i];
    break;
  }
}

body.w_1024 {background-image: url(http://www.fickler.com/lemans/images/bakgrunder/bg1024.jpg);}

/*osv ...*/

[ChromaWoods]

För det första: tror att document.documentElement.clientWidth kanske passar dig bättre? Det returnerar bredden på viewporten. screen.width returnerar bredden på skärmen, oavsett viewport. Scriptet i sig funkar, kolla http://jsbin.com/ikEPUNA/2 (fast här har jag som sagt använt clientWidth istället)

 

Om det fortfarande inte funkar för dig så kanske det kan handla om permissions? Om jag försöker surfa till en av de där bilderna så får jag en login-prompt. Kan det vara som så att JavaScriptet helt enkelt inte får access till URL:arna? Vad händer om du testar med någon annan publik bild? T.ex nåt från images.google.com?