40 users online (1 members and 39 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 1
  2. Replies: 1
  3. Overlapping background Images    Forum: CSS Forum
    Replies: 1
  4. Another question on Background images    Forum: HTML Forum
    Replies: 7
  5. Background Images    Forum: HTML Forum
    Replies: 12
  1. #1
    Specialkpntb's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2004
    Posts
    2

    Question background images

    i've noticed that my background imgaes on my site repeat themselves at higher resolution settings, but im using 800x600 and they look fine. i was wondering if there was a way to make the image stretch itself to maximzie itself on any screen resolution.
    thnx for your help

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Specialkpntb,

    And a big welcome to these forums

    There is no way to make the image stretch itself

    What you can do, though, is make another image for 1024 x 768 resolution
    then use javascript to detect browser resolution and swop the image

    Here is a script that will achieve this objective...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>background image changer</title>
    
    <style type="text/css">
    /*<![CDATA[*/
    .first
        {
         background:url(your_1024_image.jpg);background-attachment:fixed;
        }
    .second
        {
          background:url(your_800_image.jpg);background-attachment:fixed;
        }
     /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
    function sniffer() 
        {
         var screen_height = screen.height;
         var screen_width = screen.width;
         if (screen_height >= 768) 
        {
                       screen_width = 1024;
                       screen_height = 768;
                       change('changeme', 'first');
        } 
         else 
        {
    	screen_width = 800;
    	screen_height = 600;
                      change('changeme', 'second');
        }
        }
        
    function change(id, newClass) 
        {
          identity=document.getElementById(id);
          identity.className=newClass;
        }
     //]]>
    </script>
    
    </head>
    
    <body class="first" id="changeme"onload="sniffer();">
    
    </body>
    </html>
    cthead

  3. #3
    Specialkpntb's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2004
    Posts
    2

    Thumbs up thnx

    thanx so much



Tags for this Thread