Use Different Background Graphic Depending on Client's Screen Resolution

Posted on 2007-09-30
Last Modified: 2012-05-05
I want the HTML page to load one background graphic if the client's screen resolution is 800x600, but a different background graphic if the client's resolution is 1024x768 or higher. (Assume clients are using IE6.)
   I know this javascript will detect the screen resolution:
     <a href="javascript:alert('Your resolution is '+screen.width+'x'+screen.height);">
Click for your screen resolution</a>

But how can it be adapted to a function that runs automatically on window load or page load and writes a different graphic source into the <body> tag?
    For example, if the resolution is 800x600, I want it to act like:
        <body background=graphic1.jpg>
But if the resolution is 1024x768 or higher, it should act like:
        <body background=graphic2.jpg>

Note: I've seen javascripts that redirect to a different page depending on resolution, but I need a solution that keeps the same page and just changes which graphic is used.
Question by:FrankTech
    LVL 10

    Accepted Solution

    Hello FrankTech,

    Try the following:
      <!-- Default to 1024x786 because most people have that -->
      <body background="graphic2.jpg">
         <!-- In-line script which runs immediately after the body tag has been parsed into the DOM tree, but before images are loaded -->
         <script type="text/javascript">
              if (screen.width == "800" && screen.height == "600")
                 document.body.background = "graphic1.jpg";



    Author Comment

    Yes. That seems to work. I notice a delay in the 800x600 graphic (I see a blank background for a few milliseconds, then the graphic becomes visible). But I guess that delay is unavoidable.  As you said, most clients will likely have 1024x786 or higher, so that delay should not affect most users. Thanks.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (, typical array handling might look like this: (CODE) B…
    In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now