DHTML Full Size Background Image Code

This script will make a background image always be the full size of the window, no matter how you resize the window itself.

Script Demo:

Dynamic HTML Code:

Insert this code into <head> tags

<script language="JavaScript1.2">
<!--
    NS4 = (document.layers);
    IE4 = (document.all);

    scalewidth = true;
    scaleheight = true;
    imagesource = "BACKGROUND.jpg";

    if (NS4) window.onload = setresize;

    function setresize(){
        setTimeout("window.onresize=redo;",500);
    }

    function redo(){
        window.location.reload()
    }

    if (IE4) window.onresize = redoie;

    function redoie(){
        imagebkg.width = document.body.clientWidth;
        imagebkg.height = document.body.clientHeight;
    }

    function bkgimage() {

      windowwidth = (NS4) ? innerWidth : document.body.clientWidth;
      windowheight = (NS4) ? innerHeight : document.body.clientHeight;

      imagestr = "<DIV ID=elBGim"
      + " STYLE='position:absolute;left:0;top:0;z-index:-1'>"
      + "<IMG NAME='imagebkg' BORDER=0 SRC=" + imagesource;
      if (scalewidth) imagestr += " WIDTH=" + windowwidth;
      if (scaleheight) imagestr += " HEIGHT=" + windowheight;
      imagestr += "></DIV>";

      document.write(imagestr);

    }
//-->
</script>

Insert this code into <body> tags

Instruction:

Change the following text:

You can change the background image by changing the image source attribute of "BACKGROUND.jpg" below. Change this to the exact path of whatever you want the background image to be.

Webmaster » Web Programming » DHTML » Full Size Background Image Code

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links