SWF as CSS Div Background

Demo

I've run across this question several times and when looking for an answer I see conflicting accounts on wethor or not it is possible. The trick is to give the div containing the swf file a z-index of 0 and using wmode="transparent" and or <param name="transparent">. The content will go in its own div with a z-index of something larger than 0. Here is my solution.

Please Select Red Blue Green Yellow Black Dropdown appears over content.

Copy the CSS

Select All
<style type="text/css"> <!-- #flashContent { z-index: 0; } #otherContent { margin: -25px 0 0 10px; z-index; 1; color: orange; font-weight: bold; font-family: georgia,times new roman,times,serif; font-size: 18px; } --> </style>

Copy the Html

Select All
<div id="flashContent"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0" id="Movie1" width="450" height="100"> <param name="movie" value="media/movie.swf"> <param name="bgcolor" value="#FFFFFF"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <param name="allowscriptaccess" value="samedomain"> <embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="Movie1" width="450" height="100" src="media/movie.swf" bgcolor="#FFFFFF" quality="high" wmode="transparent" swliveconnect="true" allowscriptaccess="samedomain"> <noembed> </noembed> </embed> </object> <div id="otherContent"> I'm text in the 'otherContent' div! </div> </div>

Download

movie.swf

working demo