Results 1 to 3 of 3

Thread: background image based on screen resolution

  1. #1
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default background image based on screen resolution

    Can someone tell me what is wrong with this script. I want a different size background image to appear based on users screen resolution.

    Code:
    <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>
    Last edited by Snookerman; 04-26-2009 at 07:35 PM. Reason: added [code] tags

  2. #2
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    If you just want to detect the screen resolution I think you just need to detect the height & width. eg
    Code:
    if (screen.width==640||screen.height==480)
    You should also finish with an ELSE to catch any other sizes, not an ELSEIF.

  3. The Following User Says Thank You to forum_amnesiac For This Useful Post:

    rsines (04-27-2009)

  4. #3
    Join Date
    Feb 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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:

    Code:
    <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>
    Last edited by Snookerman; 04-27-2009 at 07:35 PM. Reason: added [code] tags

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •