How to Use a Flash Movie As a Background

Using a Flash movie as a background opens a lot doors in creating HTML and CSS web pages. The trick is to use the "z -index" property which specifies the stack order of elements. The greater stack orders will be on top and the lower stack orders on the bottom. Stack orders are determined by integer numbers. This means that in CSS style rules you are allowed to place one element on top of another. This technique is simple but when applied to complex hierarchies it can become complex.

Instructions

1. Open a HTML editor such as Dreamweaver or FrontPage and insert the Flash swf background file. Set the Flash swf file up, such as centering the file and adjusting the width and height values.

2. Add "Div" for content that will be placed over the Flash file and then set up your CSS file to apply the z-index.

3. Use the sample code below to get started. Changed out "YourFlashFile.swf" file to your Flash background swf.

4. Use this HTML Code:

   <div id="header">

   <div style="padding: 30px 20px;">

   <h1>Image</h1>

   </div> </div>

   <div id="content">

   <h1>

   Lorem Ipsum</h1>

   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div>

   <div id="background">

   <script type="text/javascript">

   AC_FL_RunContent( 'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','100%','height','600','id','test','src','bg','wmode','transparent','quality','high','scale','noscale','salign','lt','bgcolor','#333333','name','test','align','left','allowscriptaccess','sameDomain','allowfullscreen','true','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','bg' ); //end AC code

   </script>

   <noscript>

   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="600" id="test">

   <param name="allowScriptAccess" value="sameDomain" />

   <param name="allowFullScreen" value="true" />

   <param name="wmode" value="transparent" />

   <param name="movie" value="bg.swf" />

   <param name="quality" value="high" />

   <param name="scale" value="noscale" />

   <param name="salign" value="lt" />

   <param name="bgcolor" value="#333333" />

   <embed src="YourFlashFile.swf" wmode="transparent" quality="high" scale="noscale" salign="lt" bgcolor="#333333" width="100%" height="600" name="test" align="left" allowscriptaccess="sameDomain" allowfullscreen="true" type="application/x-shockwave-flash"

   pluginspage="http://www.macromedia.com/go/getflashplayer" />

   </object>

   </noscript>

   </div>

   (see reference 3)

5. Use this CSS Code:

   body{margin: 2px; padding: 0px; z-index: -8; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; color: #000000;}

   h1{font-size: 34px; color: #333333; padding: 0px; margin: 0px; line-height: 34px; font-weight: normal; font-family: Arial, Helvetica, sans-serif;}

   #header{z-index: 2; position: relative; top: 0px; margin: 0px auto; width: 400px; padding: 0px; height: 118px; background: #ffffff;}

   #background{position: absolute; width:100%; top: 0px; left: 0px; height: 100%;}

   .clear{clear: both; font-size: 0px; width: 0px; line-height: 0px; height: 0px; display: block; overflow: hidden;}

References

• W3 School: CSS z-index Property
• Mozilla: Understanding CSS z-index
• Peter Hinton Design: Using Flash as a background