Flash Movies as Backgrounds
Oct
13
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");
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?
If you want to see the possibilities of this technology, you can check http://www.raincreativelab.com. It combines Flash, CSS and HTML into one immersive experience. We did provide how we used these technology. If you need some sort of inspiration on what can be done.
To push the limits, check Pixel Space.
Thanks,
I’m working on a new jquery plugin based on Youtube new API; this plag-in let you either display a customized player or display a youtube movie as background of your page. You can download a prerelease and try it out here:
http://github.com/pupunzi/jquery.mb.YTPlayer/downloads
Bye,
Matteo
How do you make it fill out over the whole browser?
I’m searching for that, but ain’t finding the solution….
You should definitely take a look at the free $10 bonus at SlotoCash. Only available now at: SlotoCash. Good luck!
Nice Creation
thanks
even m thinkin to implement this here Abaxis
“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.” –
I reeaaallllyy need this golden workaround – does anyone have any ideas ?
I’ve worked so hard to try and fix it with all sorts of experiments and overflow:auto; experiments…. to no avail.
It seems that I’m stuck with either no scrollbars at all, so noone can scroll… or full screen scrollbars which scroll the entire height and width of the SWF file.
I really want just scrollbars for the content, when the window is made small.
Can anyone help please ?
Thanks
These demos all look very nice, but none seems to work with Safari 5.0.
What do a shiny red bicycle, a new wagon, and a sandcastle have in common? Well, depending on one’s age, they are things from the past that left an impression on our lives. Where would we be without such significant memories? Our lives would lack color; we would be missing that 3rd dimension that brings life to stories of past times. Not only do we keep souvenirs of precious possessions from our youth, but we also have memories from emotional times and remarkable events.
Muito bom esse post, Parabéns !
Terima Kasih