This tutorial will guide you how to add a Flash SWF file
as background of a HTML page.
To embed Flash SWF as background of a web page, there are
basically two steps:
Make the Flash
movie transparent.
Use div
and properties z-index, position:absolute
and position:relative to make the
Flash movie displaying under other contents.
Step 1: Make the Flash movie transparent.
Look for the code that embeds the Flash Movie. It should
look similar to this:
<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="480" height="125">
<param name="movie" value="flashmovie.swf"
/>
<param name="quality" value="high"
/>
<embed src="flashmovie.swf" quality="high"
type="application/x-shockwave-flash" width="480"
height="125" pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
To make the Flash movie background transparent, you need
to add the WMODE parameters to the HTML code.
Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">
Add the following parameter to the EMBED tag:
wmode="transparent"
After edit, the HTML code should look similar to below. The
new changes are shown in red.
<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="480" height="125">
<param name="movie" value="flashmovie.swf"
/>
<param name="quality" value="high"
/>
<param name="wmode" value="transparent">
<embed src="flashmovie.swf" quality="high"
type="application/x-shockwave-flash" width="480"
height="125" wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
Step 2: Use div and properties z-index, position:absolute
and position:relative to make the Flash movie displaying under
other contents.
To make the Flash movie as background, you need to use div
layers. A div layer is like a window inside a window, which
lets you define an area inside your HTML page.
<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://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="480" height="125">
<param name="movie" value="flashmovie.swf"
/>
<param name="quality" value="high"
/>
<param name="wmode" value="transparent">
<embed src="flashmovie.swf" quality="high"
type="application/x-shockwave-flash" width="480"
height="125" wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
</div>
<div style="position:relative;
z-index:2;">
These are the HTML content.
</div>
</div>
The z-index is the key property. The smaller the value, the
div layer will be lower.
Below is an example:
HTML content HTML
content HTML content HTML content HTML content HTML content
HTML content HTML content HTML content HTML content HTML
content HTML content HTML content HTML content HTML content
HTML content
