[CSS] Flashを背景にする

Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時（無さそうだけど）に使えるんじゃないかなー。

まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。

<div id="content">
<object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf">
  <param name="movie" value="index.swf" />
  <param name="quality" value="high" />
</object>
 <div class="section">
  <h2>Flash Background sample</h2>
  <p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p>
 </div>
</div>

今更感漂うけど続くよー

Flashのソースはこれだけだとz-index幾ら指定しても背景になってくれんので、以下を追加する。

<param name="wmode" value="transparent" />

このパラメータは、lightbox使ったときにflashが上に来る問題の解消でお馴染みのアレ。

あとは普通にCSSを書く

#content {
width:500px;
height:300px;
margin:0 auto;
position:relative;
}
#content object {
position:absolute;
top:0;
left:0;
z-index:0;
}
#content .section {
position:absolute;
top:30px;
left:30px;
margin:0;
z-index:5;
width:440px;
background-color:#fff;
}

スタイルシートでのポイントは

• objectをposition:absoluteにしてz-indexを0にする
• flashの上に乗せたい要素のz-indexを0より大きくして配置する

以上２点。
positionまみれになってしまうものの、flashを背景っぽくすることが出来ます。