The flash movie will be the background element and fills the width of the window. It has 4 grey buttons which will change the background colour of the movie. There are two DIVs displaying in front of it which will contain any HTML you require.
The first DIV (front-header) is the top white area is where you can put your logo, navigation etc. It has a fixed height that is set within the CSS.
The second DIV (front-content) is the lower white area and is where you will put the page content. It’s height expands infinately as you would expect.
I will not cover the SWF file in this tutorial, I will assume you guys have some knowledge of Flash - the file included in the zip really is Flash at its most basic :o).
The blue gradient is a SWF movie with a 100% width
The HTML
<div id=”front-header”>
<h1>Header</h1>
</div>
<div id=”front-content”>
<h1>Using Flash as a Background</h1>
<p>The content goes here</p>
</div>
<div id=”background”>
<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=”movie” value=”bg.swf” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />
<param name=”salign” value=”lt” />
<embed src=”bg.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>
</div>
The CSS
#front-header{z-index: 2; position: relative; top: 0px; margin: 0px auto; width: 900px; padding: 0px; height: 118px; background: #ffffff;}
#front-content{z-index: 9; position: relative; top: 316px; margin: 0px auto; padding: 25px; width: 850px; background: #ffffff;}
#background{position: absolute; width:100%; top: 0px; left: 0px; height: 100%;}
Source Files
Download the Source Files (HTML, CSS and FLA).
discuss this topic to forum
