treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Keep Flash Behind Other Elements

Last updated on:

For example, a dropdown menu going "behind" a flash movie, or staying on top of a lightbox layover.

Try This #1

Add this to the Flash embed code:

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

Try This #2

Make sure the element that is supposed to be on top has positioning (fixed, relative, or absolute) and a z-index value higher than the Flash object.

View Comments

Comments

  1. Permalink to comment#

    Thanks i was wondering how i would get flash to be behind. Very helpful.

  2. Permalink to comment#

    helpful trick. thanks

  3. Great website design Chris and also great tips!
    Love your website! =)

    Tonya in Stafford, VA, USA
    near Washington DC

  4. luke
    Permalink to comment#

    thank you

  5. I try to handle this with positioning but this is good to know. Thanks.

  6. thx, i find your tutorial via google. i am working to solve flash problem right now. good job

  7. M
    Permalink to comment#

    thanks, this worked great.

  8. Permalink to comment#

    Great CSS code tips! Thank you so much!

    -Tonya

  9. ganesh
    Permalink to comment#

    this code not working in ie7

  10. Kyle
    Permalink to comment#

    The code doesn’t work for me I’ve tried it in all the browsers I could think of except IE 9 because I am using windows xp still but it doesn’t work on firefox opera chrome or safari, and i treid it with IE8

  11. Permalink to comment#

    Thank you. I changed the position to relative and set the z-index values and it resolved this issue!

  12. Permalink to comment#

    I attempted this, sadly the flash videos from YouTube still float above my header bar. Ive even given the header an absurd z-index with out any change. :(

  13. It won;t work and spent whole week researching for IE. In transparent your background will disappear unless the background is the same as the movie. Try this it worked for me

    <object id="flash1" data="splash.swf" height="325" type="application/x-shockwave-flash" width="960">
    <param name="movie" value="splash.swf" />
    <param name="quality" value="High" />
    <param name="wmode" value="opaque" />
    <param name="menu" value="false" />
    </object>

    see a demo here: http://www.vrnet.co.ke/atbltd

    Cheers have fun !

  14. Simon Davies
    Permalink to comment#

    I am having issue with youtube and chrome.. I have a header fixed at the top, so that the content below scrolls behind it, but then when the youtube player is scrolled underneath the header the header background image re-positions itself and adds spacing. But this only happens when i use the background position of fixed.

    any ideas how to prevent this

    cheers

  15. Ashwini
    Permalink to comment#

    I tried all the possible ways I am not getting the solution. The drop down menu is getting hidden behind the flash object in chrome.

Leave a Comment

Use markdown or basic HTML and be nice.