Ever wondered how to set a flash movie as your website background? Well here’s a simple approach that can be used.

The following example will guide you through the process of “layering” a page in a way to give the appearance of a flash background.

The are however a couple of points that are worth noting.  These include:

• Absolute positioning is used to add content above the flash movie.  This therefore mean that the content is taken out of the flow of the document and when resizing the page content may be cut off unless a good workaround is used.
• UFO (Unobtrusive Flash Objects) is used to embed the flash background although you could, and probably should, use SWFObject instead.

flash background HTML

The HTML below provides a simple structure and can be broken in to two sections, a div with id “flash-background” (used to house the flash background) and a second div with an id of “website” (contains your site content).

<div id=”flash-background”></div>
<div id=”website”>
<div class=”text-content”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras porta sem et ligula. Nunc nec neque. Ut nec justo non lorem porttitor dictum. Etiam nec dui et odio egestas ornare. Quisque magna augue, tristique vel, egestas ac, lacinia et, purus. Curabitur varius. Sed tempor. Integer bibendum leo at urna. Ut tortor. Cras lobortis justo non lacus.</p>
</div>
</div>

flash background CSS

The CSS below is not very complex.  Set your default styling on the body I.e. font size, colour etc. The flash background div is positioned absolutely in the centre of the page with a z-index of 0 and website div is also positioned in the centre of the page with a z-index of 10000 (obviously doesn’t have to be that high I just wanted to show that it was larger  ).  CSS wise that is it, not very difficult at all.

body{
margin:0px;
padding:0px;
background-color:#666666;
font-family:arial;
font-size:80%;
color:#333333;
overflow:hidden;
}
#flash-background{
width:1014px;
height:960px;
text-align:left;
margin:0px auto;
position:absolute;
top:0px;
left:50%;
margin-left:-507px;
z-index:0;
}

#website{
width:800px;
height:400px;
text-align:left;
margin:30px auto;
position:relative;
z-index:10000;
background-image:url(images/overlay.png);
background-repeat:no-repeat;
}

.text-content{
padding:15px;
}

JavaScript

Finally we need to embed the flash movie into the page, in the example below I have used UFO, however, I would strongly advise you to use SWFObject 2.0 as this is currently the best solution in the market.

var FO = { movie:"flash/background.swf", width:"1014", height:"960", majorversion:"8", build:"0", xi:"true", wmode:"transparent" };
UFO.create(FO, "flash-background");