Log in

View Full Version : background image based on screen resolution



rsines
04-26-2009, 06:40 PM
Can someone tell me what is wrong with this script. I want a different size background image to appear based on users screen resolution.


<script language="JavaScript1.2">
<!--
if (screen.width==640||screen.height==480 && document.all||document.getElementById)
document.body.style.background="url('640_bkg.gif') white bottom no-repeat fixed"

else if (screen.width==800||screen.height==600 && document.all||document.getElementById)
document.body.style.background="url('800_bkg.gif') white bottom no-repeat fixed"

else if (screen.width==1024||screen.height==768 && document.all||document.getElementById)
document.body.style.background="url('1024_bkg.gif') white bottom no-repeat fixed"

else if (document.all||document.getElementById)
document.body.style.background="url('1280_bkg.gif') white bottom no-repeat fixed"
//-->
</script>

forum_amnesiac
04-27-2009, 12:49 PM
If you just want to detect the screen resolution I think you just need to detect the height & width. eg
if (screen.width==640||screen.height==480)

You should also finish with an ELSE to catch any other sizes, not an ELSEIF.

rsines
04-27-2009, 07:00 PM
Thanks, I didn't catch that last else if!

But what I want is to use the same background image on several pages (re-sized for screen resolution). If I can find away of doing it I wouldn't have to make as many pages and use a page re-direct script based on the users screen resolution.

I tried this, and it doesn't work either:


<script language="JavaScript1.2">
<!--
if (screen.width==800||screen.height==600)
if (document.all||document.getElementById)
document.body.style.background="url('bkg_sm.gif') white center no-repeat fixed"

else if (screen.width==1024||screen.height==768)
if (document.all||document.getElementById)
document.body.style.background="url('bkg_md.gif') white center no-repeat fixed"

else
if (document.all||document.getElementById)
document.body.style.background="url("bkg_lg.gif") white center no-repeat fixed"
//-->
</script>