CODEWITHSUNDEEP
htmlflash
Putri Arisnawati
Putri Arisnawati

Reputation: 53

How to make flash as header background

I have read so many tutorials about make flash as background of a header, but there are several code involved on there. Can you explain to me how to make flash as background?

Upvotes: 0

Views: 252

Answers (2)

Wouter Konecny
Wouter Konecny

Reputation: 3540

You have to create two div's that are exactly on the same place. Then you put your flash content in div 1 and your content you want "on top" in div 2.

<div id="holder">
    <div id="flash_header_background">FLASH HERE</div>
    <div id="header_foreground">CONTENT HERE</div>
</div>

Then you style your div's with CSS to they are on top of each other.

#holder {
    height: 250px; /* Flash height */
    width: 800px; /* Flash width */
    position: relative;
}

#flash_header_background {
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 100%;
}

#header_foreground {
    z-index: 2; /* Puts this div above the background DIV */
    position: relative;
    height: 100%;
    width: 100%;
}

IMPORTANT: Remember to set the wmode of your flash content to opaque or transparent. - Thank you strah for reminding

Upvotes: 1

Marty
Marty

Reputation: 39466

The single most important element involved in making flash media a background (i.e. being able to place stuff ontop of it) is to ensure that when embedding, you're setting the wmode to opaque or transparent. Failing to do so will mean that no matter what, the media will render ontop of the other elements on the page.

Other than that, you just need to use CSS to place content over the media via position: absolute; and possibly allocating a higher value for z-index.

Upvotes: 1

Related Questions