Another website resize question

Discussion in 'Web Design & Coding' started by MytMowse, Sep 5, 2002.

  1. MytMowse

    MytMowse Guest

    I looked around this board and saw something for resizing webpages.

    Now I have a real neat bg image I made and want to use. Only most people do use 1024x and I use 1280x.

    So I was wondering if there is a way I can make the background for a certain screen size to shrink? :eek:

    Thanks. :)
     
  2. scriptasylum

    scriptasylum Moderator

    Messages:
    832
    Location:
    Des Moines,IA
    Well, one way to do that would be to create several versions of the same image scaled to fit certain resolutions. Just name them something somewhat descriptive like "pic800x600.jpg", "pic1024x768.jpg", etc...

    Then, just a little javascript in the HEAD section of the page should do the trick:

    <script language="javascript">
    var sw=screen.width;
    var t='<style type="text/css"> body { background-image:url(';
    if(sw==1024)t+='"pic1024x768.jpg"';
    else if(sw==1152)t+='"pic1152x864.jpg"';
    else t+='"pic800x600.jpg"';
    t+='); background-repeat:no-repeat; background-position:center } </style>';
    document.write(t);
    </script>

    Basically the script writes out the style sheet rule for the background image. It is set up for 3 resolutions; 800x600 (default), 1024x768, and 1152x864. It also sets it so the image is centered and will not tile to fill the screen. You could take that out, but it looks best if the image is big.

    Another way to go about it would be to use just an image sized to 800x600 and make the background color of the page the same as most of the image's main color. Then, make the image centered and non-repeating. The image will always be the same size, but the background color will help it blend in.

    There may be better or simpler solutions, but thats what i just came up with :)
     
  3. MytMowse

    MytMowse Guest

    Thanks a lot, I'll give it a try! :D