Keep Flash Behind Other Elements

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.


  1. Ben Williams
    Permalink to comment#

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

  2. jabga
    Permalink to comment#

    helpful trick. thanks

  3. Tonya -- I am a Website Designer (Love Website Designs)

    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. Patsy Gillispie
    Permalink to comment#

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

  6. Gbiografi
    Permalink to comment#

    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. Tonya
    Permalink to comment#

    Great CSS code tips! Thank you so much!


  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. Jared
    Permalink to comment#

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

  12. Greg
    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. lionvipul
    Permalink to comment#

    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" />

    see a demo here:

    Cheers have fun !

    • wlamper
      Permalink to comment#

      This worked for me better than the blogs solution. The main values to change are the values of wmode and menu to opaque and false, respectively. +1 to you sir for this workaround without the hassle of adding more lines to the css.

  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


  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.

  16. suresh
    Permalink to comment#

    Keep Flash Behind Other Elements while Flash is coming from other site? can we fix it?

  17. Paritosh
    Permalink to comment#

    I want to show a previous and next div over flash content which is opening in iframe.I have tried all the wmode=opaque or wmode=transparent or wmode=window, but fail to work in IE8.
    I cant add because flash content is coming from other site.I am loading the other site in iframe.
    Please help me ASAP.

  18. gvesch
    Permalink to comment#

    Thanks all! If anyone else (like me) was having problems, also be sure to check out Lauris’ comment.

  19. Roldan
    Permalink to comment#

    This is amazing!

    Worked for me! Thanks, more power!

  20. Stephen
    Permalink to comment#

    Wicked thanks man, love easy wins.

    sf d-)=

  21. Dylan
    Permalink to comment#

    Or… if an iFrame


    emphasis on the ?wmode=opaque or ?wmode=transparent.

  22. Greg
    Permalink to comment#

    Thanks man. This worked great!!

  23. Alwin
    Permalink to comment#

    Thank You….changing the wmode param value to transparent worked for me

  24. De1an
    Permalink to comment#

    Another solution: <EMBED src="" type="application/x-shockwave-flash" wMode="Transparent">

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.