How to add a flash background to an html element

Thanks to the css property z-index, we can easily add a flash background (swf) to an html element.

The basic steps to add an swf as background are…

To the div container which holds both swf then the other html element:

• the width and height of the main div container
• the position:relative; to allow to position the swf in a absolute mode in relation to its container

For the element which contains the swf:

• an inferior z-index so to keep the swf underneath the other element
• a position:absolute; to remove it from the normal flux of the page and position on top of it the other html elements

For the element which contains the html content to add at the top:

• a superior z-index so to keep the html content above the swf
• a position:relative; to position it in relation to its div container

For the swf itself:

• Publish it with a transparent background from flash to obtain the right script or manually edit the html to add the parameter wmode with the value transparent

Basic html structure:

<div id="container">
<div id="background">
Add here the details to embed swf
</div>
<div id="content">
Add here the html content
</div>
</div>

The basic css rules:

#container{
height: 400px;
width: 500px;
position: relative;
}
#background{
z-index: 1;
position: absolute;
}
#content{
z-index: 2;
position: relative;
}

In the following example, I used a swf with a snow effect and added above it a title h2.

The result:

NB: due to a bug with the flash player, the above method is not valid for Linux users

Bookmark this css article

css background, css flash, css flash background

8 comments

Stay updated with our RSS Feed