Chosing background size according to screen resolution - problem

Hi guys

Among other things, we offer photography, which is why our c5 site ( is designed to have photo backgrounds. We change the pics and the text on the main site every two weeks or so.

Since it's usually important to see the entire picture, I decided to use 5 different resolutions of each picture, and included the following code in the header for the browser to select the correct picture according to the screen resolution:

<script type="text/javascript"> 
            var h = $(window).height(); 
            var w = $(window).width(); 
//            alert(  h ); 
//            alert(  w ); 
//            alert(  $('body').css('background-image')  ); 
                $('body').css('background-image','url(<?php echo $this->getThemePath()?>/images/backgrounds/bg_l.jpg)'); 
            } else if((h=1024)){ 
                $('body').css('background-image','url(<?php echo $this->getThemePath()?>/images/backgrounds/bg_m.jpg)'); 
          } else if((w>1400)){ 
                $('body').css('background-image','url(<?php echo $this->getThemePath()?>/images/backgrounds/bg_ms.jpg)'); 
          } else if((w>1200)){ 
                $('body').css('background-image','url(<?php echo $this->getThemePath()?>/images/backgrounds/bg_sl.jpg)');

I know, it looks rather complicated, but after a good time of thinking, it seemed the most logic solution to me.

1920x1200 and 1680x1050 take bg_l
1280x1024 takes bg_m
1440x900 takes bg_ms
1280x720 takes bg_sl
rest (smaller) takes bg_s

These seem to be the most common resolutions to me. Nevertheless, on my laptop, running 1280x720, I get the bg_m picture, hence don't see large parge of the image.

Why is that?

Does that structure seem logic to you? If not, how else would you solve the problem?

Thanks for any inputs


View Replies: View Best Answer
jordanlev replied on at Permalink Best Answer Reply
Change "h=1024" to "h==1024" (double equal sign)
jordanlev replied on at Permalink Reply
And just for future reference, if you're not already familiar with Firebug, you should install it and learn how to use it right away! It's a Firefox plugin that lets you (among other things) debug javascript code step by step. It is an invaluable tool for web development and will help you tremendously if you learn how to use it (which shouldn't take you too long if you were able to figure out the code you posted above).

RizzzO replied on at Permalink Reply
Thanks mate, the double equal sign solved it! Great!

I am using firebug, but so far only for checking CSS. Haven't used it for scripts, dunno how. I'll have a look at that, thanks!

designnpace replied on at Permalink Reply
Hi RizzzO

thank you very much

Designnplace Team