I just got a task, client want to use swf file as page background instead of images. Here is the detail how we can make the swf as page background.
I used 3 css classes in 3 divs. .container contain the whole page, .flash_background contain only the flash object and .content keep all the data.
CSS
.container{ height: 600px; width: 800px; position: relative; } .flash_background{ z-index: 1; position: absolute; } .content{ z-index: 2; position: relative; }
Here is HTML code
<div class="container"> <div class="flash_background"> <object width="800" height="600"> <param name="movie" value="swf/file_name.swf"> <param name="wmode" value="transparent"> <embed src="swf/file_name.swf" width="800" height="600" wmode="transparent"></embed> </object> </div> <div class="content"> data will be here, images, texts etc can working properly <br /> <br /> Hello World <br /> <br /> Hello WOrld <br /> <br /> Hello WOrld <br /> <br /> </div> </div>
Done 🙂
Its working with IE, FF, Chrome very well.