HTML CSS Div Layer Tutorials | Affordable Web Hosting Home

Embed Transparent Flash Animation Movie to Top Div Layer

In this css div layer tutorial, a transparent flash animation is embed to the top div layer. Many webpage designer like to use transparent flash movie to create some interesting effect. The div layer example is shown as below.

Contents for div layer id "outerWrap" start here.......
Contents for div layer id "layer1" start here...
Flash movie embed to this div layer id "layer2"

wmode Transparent Flash Movie Embed on Top Div Layer

We also use swfobject to embed the flash movie to div layer "layer 2". Please check the source codes of this HTML web page. The source code is almost the same as previous tutorial except the wmode transparent is used to make the flash movie transparent.

params.wmode = "transparent";

Actually you can use some images or clipart embed on other div layers to create unlimited stunning animation effect. It is only up to your imagination.

CSS Div Layers Codes

#outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 500px;
width: 700px;
}

 

#layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 40px;
left: 40px;
}

 

#layer2 {
position: absolute;
z-index: 3;
height: 384px;
width: 512px;
top: 80px;
left: 129px;
}

HTML CSS Tutorial contents: How to embed transparent flash animation with wmode transparent on div layer overlapped on top.

HTML CSS Div Layer tutorials