Ever wondered how to set a flash movie as your website background? Well here’s a simple approach that can be used.
The following tutorial 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=”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.
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");
1 Comment Received
Hi Andy,
Nice example! One thing that is worth mentioning is that if your HTML content contains form elements they will not show focus events in IE6 and also Safari i believe.
The simple solution is to add a position relative to form elements and example of which can be found in the following site:
http://www.insectlore.biz/
Leave A Reply