Ever since I saw the current version of the Playstation website I have been excited about the possibilities available to designers when flash can be used as a background.
In this article I will cover how to set a Flash movie as a background element of a HTML and CSS based webpage.
Click here to view a demo..
What we are creating
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).
Bookmark / Share
Subscribe
Awesome.
Cool. I’ll try this trick.
Thanks.
@40Unregistered - Let me know of any websites you make using this technique, there aren’t many around at the moment :o)
i will let you know. i need to use liquid layout since my background will be animation not just plain or gradient color.
anyway, your source file (default.html) dont use swfobject’s tag the way it should be. Did you check browser compatibility of this technique?
It was a little while ago that I did it and I needed to mod it a bit to work on IE6. I will look into it over the weekend and update it if necessary though
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language ;)
See you!
Your, Raiul Baztepo
Great site this article and I am really pleased to see you have what I am actually looking for here and this this post is exactly what I am interested in. I shall be pleased to become a regular visitor :)
Hi ! :)
My name is Piter Kokoniz. Just want to tell, that I’v found your blog very interesting
And want to ask you: what was the reasson for you to start this blog?
Sorry for my bad english:)
Tnx!
Piter Kokoniz, from Latvia
@PiterKokoniz - Cheers for posting. The reason for the blog is to give something back to the web community but I haven’t updated it this much as I would like
Hey good stuff…keep up the good work! I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog.
Awsome!
Thanks for sharing :)
Hi Peter, Good Job - Been playing with this concept for days now, and not got it to do what I need..
This will help me build it the way I’ve been trying to without ‘pulling my hair out’ any more :)
Thanx for sharing…