Dynamically change background image size in Firefox

Discussion in 'Javascript' started by JV, Feb 24, 2008.

  1. JV

    JV Guest

    I have code below for dynamically changing the size of a background
    image depending on the user's viewable area, which works great in IE
    as you will see, but doesn't work in Firefox. The non-MSIE code is
    inside of the brackets adjacent to the 'else' statement. Any
    suggestions on what I need to change to make this work in Firefox?
    Thanks!


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <script language="JavaScript">
    var backgroundset = false; // do not change, for internal use only

    function fixedBackground(url) {
    document.body.background = url; if(!backgroundset) {
    document.body.style.overflow = 'hidden';
    document.body.style.padding = '0px';
    document.body.style.margin = '0px';
    var overlay = document.createElement('DIV');
    if(navigator.userAgent.indexOf("MSIE") > 0) {
    overlay.style.position = 'absolute';
    overlay.style.top = '0px';
    overlay.style.left = '0px';
    overlay.style.height = '100%';
    overlay.style.width = '100%';
    overlay.style.overflow = 'auto';
    overlay.innerHTML = document.body.innerHTML;
    document.body.innerHTML = '<img id="background" height="100%"
    width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
    top: 0; z-index: 0" />';
    document.body.appendChild(overlay);
    backgroundset = true;
    }
    // This is where it goes wrong...
    else {
    overlay.setAttribute("style", "position: absolute; top: 0px; left:
    0px; height: 100%; width: 100%; overflow: auto;");
    overlay.innerHTML = document.body.innerHTML;
    document.body.innerHTML = '<img id="background" height="100%"
    width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
    top: 0; z-index: 0" />';
    document.body.appendChild(overlay);
    backgroundset = true;
    }
    }
    else document.body.background = url;
    }
    </script>
    </head>
    <body onload="fixedBackground('http://download.qj.net/uploads/
    files_module/screenshots/253_PSP-background-thor64.jpg');">
    <center>
    <SCRIPT LANGUAGE="JavaScript">
    document.write(" " + document.body.clientWidth + " " +
    document.body.clientHeight + " " + window.outerWidth + " " +
    window.outerHeight);
    </script>
    </center>
    </body>
    </html>
    JV, Feb 24, 2008
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Boonish
    Replies:
    4
    Views:
    7,330
    Ben C
    Sep 30, 2006
  2. Wongod
    Replies:
    2
    Views:
    693
  3. jc
    Replies:
    3
    Views:
    1,712
  4. jc
    Replies:
    1
    Views:
    1,352
    Neredbojias
    Mar 19, 2008
  5. Dj Frenzy
    Replies:
    3
    Views:
    292
    Robert
    Feb 10, 2004
Loading...

Share This Page