• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 276
  • Last Modified:

Use Different Background Graphic Depending on Client's Screen Resolution

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.
1 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";


FrankTechAuthor Commented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now