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.

Advertisement