Add Flash SWF as Background of a HTML Page

Simple Flash Tutorial:
Add Flash SWF as Background of a HTML Page

There are two steps to embed flash swf as background of a web page:

1. Embed the flash movie and add the ‘wmode’ parameter to make it transparent.

2. Use div, and set ‘z-index’ properties to make the flash movie displayed under other contents.

Step by Step:

Step 1: Embed the flash movie and set the ‘wmode’ parameter to make it transparent. Here is an example of code that embeds the Flash Movie (text_lighted.swf).

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="722" height="421" title="inixsby">
<param name="movie" value="text_lighted.swf" />
<param name="quality" value="high" /> <embedsrc="http://inixindosurabaya.com/flash/text_lighted.swf"
quality="high" type="application/x-shockwave-flash" width="722" height="421"
pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed>
</object>

To make the flash movie background transparent, we need to add the ‘wmode’ parameters into object tag.

-> Add the following parameter to the ‘object’ tag:
<param name="wmode" value="transparent">

-> Add the following parameter to the ‘embed’ tag:
wmode="transparent"

Now we have the HTML code that should look like this (changes are shown in red) :

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="722" height="421" title="inixsby">
<param name="movie" value="text_lighted.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="http://inixindosurabaya.com/flash/text_lighted.swf" quality="high" type="application/x-shockwave-flash" width="722" height="421" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

Step 2: Use div layers, and set ‘z-index’ properties to make the flash movie displayed under other contents.

To make the Flash movie as background, or displayed under other contents, we need to use div layers and set z-index properties (changes are shown in red).

<div style="width:480px;height:125px;position:relative;">
<div style="position:absolute; z-index:1;">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="722" height="421" title="inixsby">
<param name="movie" value="text_lighted.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="http://inixindosurabaya.com/flash/text_lighted.swf" quality="high" type="application/x-shockwave-flash" width="722" height="421" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

</div>
<div style="position:relative; z-index:2;">
<!—- These are HTML contents will be displayed over flash background -->
<p>Content Content Content Content Content</p>
</div>
</div>

Here is an example of Flash swf as web page background...

http://inixindosurabaya.com/flash/flash_tips1.html