Swf Movie as Background for HTML pages

Posted on | September 16, 2008 | No Comments

Yesterday I got an inquiry about using swf movie as background or masthead banner for a webpage. Is it possible to do that?

I would think that older browsers will show the swf movie with the highest z-index, making it the top most elements. Newer browsers from Firefox2, IE6 onwards would render the z-index correctly.

I came up with a simple html page to test it out. 2 divs behind the flash and 3 in front with one holding a ul navigation.

Codes and Demo

http://www.dev-work.com/givemecake/demo/flash_background/flash_background.html

Getting it to work:

Position your divs on top of the flash with position:absolute.
Place swf place html codes or js script in a div with id page-background
!Important: wmode has to be transparent or opaque in order to for the z-index effect to work. See http://mediakit.go.com/support/whatis_wmode.html for the meaning of wmode
Set the z-index of the divs higher than flash movie. For example, z-index of page-background is 100. The divs on top are 110, 120, 130 respectively.

There are accessibility concerns with using Flash with wmode set to transparent. When using tab to navigation around the page. Outlinks of focused links on top of the Flash movie is not visible.

See http://www.webaim.org/techniques/flash/
for more information.

Results

Firefox 3, Safari 3, IE7 and IE8 renders the all the z-index correctly. In IE5.5 and 6, the UL navigation is hidden by the flash. Just the UL. Setting the z-index explicitly for the UL does not make a difference.

Thanks to IETester, I am able to test the page in IE5.5, 6 , 7 and 8. Link for IETester