Just nu i M3-nätverket
Gå till innehåll
fickler

Olika bakgrundsbild på olika skärmar?

Rekommendera Poster

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

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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 ...*/

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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?

Redigerad av chromawoods

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...