Chosing background size according to screen resolution - problem
Permalink
Hi guys
Among other things, we offer photography, which is why our c5 site (www.textcube.ch) 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:
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
RizzzO
Among other things, we offer photography, which is why our c5 site (www.textcube.ch) 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">
$(document).ready(function(){
var h = $(window).height();
var w = $(window).width();
// alert( h );
// alert( w );
// alert( $('body').css('background-image') );
if((w>1500)){
$('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)');Viewing 15 lines of 20 lines. View entire code block.
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
RizzzO
Change "h=1024" to "h==1024" (double equal sign)
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).
-Jordan
-Jordan
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!
RizzzO
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!
RizzzO
Hi RizzzO
thank you very much
Designnplace Team
designnplace.com
thank you very much
Designnplace Team
designnplace.com
