Home > Computer & Technology Related > Overlapping flash with CSS

Overlapping flash with CSS

May 29th, 2009 Remco Leave a comment Go to comments

By default, flash movies are always shown on the top-level of a displaytree. However, it can be very useful to be able to move the flash content to the background, and having it overlapped by other content.
(E.G, you have a flash movie in the header of your website, but there’s a sidebar menu which should be displayed over the header)

This is easily achieved by following these steps:
1) Add wmode="transparent" to your object and embed tags which include the flash movie
2) Wrap the object and embed tags by a div and assign a CSS class to it.
3) Define a z-index for this class in your stylesheet.
4) Assign a higher z-index for all items that should overlay the flash movie.
5) Refresh and enjoy.

Example:

HTML flash include:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="flashheader">
<object width="1024" height="202" data="fileadmin/template/header.swf" type="application/x-shockwave-flash">
<param name="id" value="header" /&gt;
<param name="align" value="middle" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="src" value="fileadmin/template/header.swf" />
<param name="name" value="header" />
<param name="allowfullscreen" value="false" />
</object>
</div>

CSS for flash:

1
2
3
4
5
6
7
8

div.flashheader {
   display: block;
   width: 1024px;
   left:0;
   margin-top:-260px;
   position: relative;
   z-index: 1;
}

CSS for overlap:

1
2
3
4
5
6
7
8
9
10

div.side{
   height:578px;
   width:372px;
   float:left;
   background-image:url('../img/rightbar.png');
   position: absolute;
   top:114px;
   left: 612px;
   z-index: 100;
}

Follow on Twitter

Categories: Computer & Technology Related Tags: , , , , , , , ,
  1. Remco
    June 8th, 2009 at 11:22 | #1
    Reply | Quote

    Btw, creds to Arno for this tip ;)

  1. No trackbacks yet.
You must be logged in to post a comment.