vForums Support > Programming & Coding :: Programming Discussion :: > Different Background Images for resoultions
Different Background Images for resoultions - Posted By ashkir (ashkir) on 22nd Mar 10 at 10:25pm
Trying to figure it out as I have a lot of widely different resultions according to google anayltics. And surprisingly 1680 is the most common on my site o_o.

I was told to use this:
Code:
Select All
 
  1. <script language=Javascript>
  2. <!--
  3. var background
  4. if (screen.height == 1280) && (screen.width == 1024)
  5. {
  6. background = "http://novogradtimes.com/wp-content/themes/arras-theme/images/backgrounds/1280.jpg";
  7. document.write (background);
  8. }
  9. elseif (screen.height == 1280) && (screen.width == 800)
  10. {
  11. background = "http://novogradtimes.com/wp-content/themes/arras-theme/images/backgrounds/1280.jpg";
  12. document.write (background);
  13. }
  14. elseif (screen.height == 1680) && (screen.width == 1050)
  15. {
  16. background = "http://novogradtimes.com/wp-content/themes/arras-theme/images/backgrounds/1680.jpg";
  17. document.write (background);
  18. }
  19. elseif (screen.height == 1440) && (screen.width == 900)
  20. {
  21. background = "http://novogradtimes.com/wp-content/themes/arras-theme/images/backgrounds/1440.jpg";
  22. document.write (background);
  23. }
  24. elseif (screen.height == 1920) && (screen.width == 1080)
  25. {
  26. background = "http://novogradtimes.com/wp-content/themes/arras-theme/images/backgrounds/1920.jpg";
  27. document.write (background);
  28. }
  29. else
  30. {
  31. background = "http://novogradtimes.com/wp-content/themes/arras-theme/images/backgrounds/1440.jpg";
  32. document.write (background);
  33. }
  34. -->
  35. </script>
 


But I don't understand code :X
Re: Different Background Images for resoultions - Posted By Kronus (kronus) on 23rd Mar 10 at 1:39am
All that's saying is that if a user has a certain resolution, that person sees a certain background image. {Tongue Out}
Re: Different Background Images for resoultions - Posted By Michael (wrighty) on 23rd Mar 10 at 2:13am
Why do you want a different background for different resolutions?
Re: Different Background Images for resoultions - Posted By ashkir (ashkir) on 23rd Mar 10 at 10:35pm
20% of my website's 10k viewers use 1680

20% use 1440

20% use 1280

:X
Re: Different Background Images for resoultions - Posted By Ross (admin) on 23rd Mar 10 at 11:08pm
I'd recommend checking the size of the window rather than the size of the screen. Not everyone has their browser window maximised. Something like this (not fully tested)

<script type="text/javascript">
<!--

// List background images from the largest to the smallest
// For the width minus 20px or so to account for scrollbars
var bg_imgs = Array(
Array(1420, 'Image 1 URL'), // 1440
Array(1260, 'Image 2 URL'), // 1280
Array(1004, 'Image 3 URL') // 1024 // no comma on last line
);

var window_width = document.body.offsetWidth;
for(k =0; k<bg_imgs.length; k++) {
if(bg_imgs[k][0] <= window_width) {
document.body.style.backgroundImage = 'url('+ bg_imgs[k][1] +')';
break;
}
}

//-->
</script>