Posts Tagged “html”

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.

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

Comments 3 Comments »