Posts Tagged “html”

13 05 2008

Background fitting the browser (html/css/javascript)

Posted by: Romuald in experiments, tags: , , , , ,

This has nothing to do with flash but I share this quick try as I saw a lot of people looking for a background that fit the browser in html.

I used the ratio out I explained in this previous post, obvously you don't have the flash smoothing.

It is not perfect, I had to remove the scrollbars as a part of the picture is not visible. See the demo and download the source.

I'm far from being a good html/css/javascript developer so If you know already a good version or if you have developed one, please comment.

Plain Text
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Soundstep | experiments (html/css background fitting the borwser)</title>
  7. html, body {
  8.     overflow: hidden;
  9. }
  10. </style>
  11. <script type="text/javascript" src="browser.js"></script>
  13. function fixedBackground(url) {
  14.     document.body.style.padding = '0';
  15.     document.body.style.margin = '0';
  16.     var overlay = document.createElement('DIV');
  17.     overlay.style.position = 'absolute';
  18.     overlay.style.top = '0';
  19.     overlay.style.left = '0';
  20.     overlay.style.height = '100%';
  21.     overlay.style.width = '100%';
  22.     overlay.innerHTML = document.body.innerHTML;
  23.     document.body.innerHTML = '<img id="bg" width="10" height="10" src="' + url + '" style="left: 0; top: 0; z-index: 0" />';
  24.     document.body.appendChild(overlay);
  25.     backgroundset = true;
  26.     updateBackground();
  27. }
  28.  
  29. function updateBackground() {
  30.     var bSize = getSize();
  31.     var sWidth = bSize.w;
  32.     var sHeight = bSize.h;
  33.     var ratio = 1024 / 768;
  34.     if (sWidth / ratio <sHeight) sWidth = sHeight * ratio;
  35.     else sHeight = sWidth / ratio;
  36.     var __bg = document.getElementById('bg');
  37.     __bg.top = 0;
  38.     __bg.left = 0;
  39.     __bg.width = sWidth;
  40.     __bg.height = sHeight;
  41. }
  42.  
  43. function getSize() {
  44.     var myWidth = 0, myHeight = 0;
  45.     if( typeof( window.innerWidth ) == 'number' ) {
  46.         //Non-IE
  47.         myWidth = window.innerWidth;
  48.         myHeight = window.innerHeight;
  49.     }
  50.     else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight )) {
  51.         //IE 6+ in 'standards compliant mode'
  52.         myWidth = document.documentElement.clientWidth;
  53.         myHeight = document.documentElement.clientHeight;
  54.     }
  55.     else if (document.body && ( document.body.clientWidth || document.body.clientHeight )) {
  56.         //IE 4 compatible
  57.         myWidth = document.body.clientWidth;
  58.         myHeight = document.body.clientHeight;
  59.     }
  60.     var r = {w:myWidth, h:myHeight};
  61.     return r;
  62. }
  63. </script>
  64. </head>
  65.  
  66. <body onresize="updateBackground()" onload="fixedBackground('bg.jpg')">
  67.  
  68.  
  69.  
  70. </body>
  71. </html>

Comments 3 Comments »