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");
9 Comments 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/
*sigh* I thought I had found the ideal background for my Flash movie, but alas no FLA. As a newbie I need a FLA to put my images on top of the background.
Thanks anyway it’s a great swf! I just don’t know how to put my images on top of it!
Wow!
now have some ideas to impress my clients
thanks!
Well done, this is fantastic!
I had been looking for a simple solution like this for ages.
I’ve used your script on my website, I think it’s cool! http://www.theflowermountain.com/index_en.php
My only issues are
- I get the horizontal scrollbar, I might be able to fix that with CSS but haven’t found a way yet
- What if I wanted this background to repeat? I created the biggest SWF Flash would let me (2800px I think) but I’d love it if it would carry on down the page. Any ideas?
Thanks loads, this is brilliant
great…like this http://es.playstation.com/
how to set width and height of the flash file to 100% with respect to screen resolution…. and this tutorila was great-full to have it….so pls reply me back thank u…
very nice sites thanks admin…..
Hi Andy
It’s really very nice work.recently I found this type of work…and i find it.
thanks
Hello,
I wanted to thank you for sharing… it would appear this is the closest solution so far. I was searching for this so that I could design a site that utilizes some of the style that flash offers and still maintain SEO standards.
Using *browsershots.org* I tested this solution for compatibility and found that about half passed.
Not a perfect solution but that is more about the battle between Search Engines, Flash & Silverlight. I wonder if they will ever figure out how to communicate with each other?
Leave A Reply