labs.calibrate.be

The problem:

For a project we were trying to make a Drupal based site a bit more attractive, by adding a full screen flash background.
The SWF had to scale with the browserwindow - and stay fixed in the window during scolling.

The solution:

HTML:
Make sure the flash div comes first - otherwise it won’t work.

since this solution doesn’t work in IE6 (go figure) - we only embed the swf when your browser is greater than IE6

<!--[if gt IE 6]><!-->
<div id="flash">
   place your swf here
</div>
<!--><![endif]-->

<div id="wrapper">
   your sites content
</div>

 

CSS:
We position the flash div fixed to the upper left corner of the . This way the flash stays on the same place while scrolling.
The Z-indexes make sure the Flash div is positioned behind the website content.

#flash {
   background-color: #000000;
   height: 100%;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 0;
}
#wrapper {
   position: relative;
   z-index: 1;
}

Further issues:

• doesn’t work in IE6
• no mouse pointer in Safari when hovering over links (even when added in CSS)