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.

Comments

  1. User Avatar
    Ben Williams
    Permalink to comment#

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

  2. User Avatar
    jabga
    Permalink to comment#

    helpful trick. thanks

  3. User Avatar
    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. User Avatar
    luke
    Permalink to comment#

    thank you

  5. User Avatar
    Patsy Gillispie
    Permalink to comment#

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

  6. User Avatar
    Gbiografi
    Permalink to comment#

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

  7. User Avatar
    M
    Permalink to comment#

    thanks, this worked great.

  8. User Avatar
    Tonya
    Permalink to comment#

    Great CSS code tips! Thank you so much!

    -Tonya

  9. User Avatar
    ganesh
    Permalink to comment#

    this code not working in ie7

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

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

  12. User Avatar
    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. User Avatar
    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" />
    </object>

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

    Cheers have fun !

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    suresh
    Permalink to comment#

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

  17. User Avatar
    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.
    Thanks
    Paritosh

  18. User Avatar
    gvesch
    Permalink to comment#

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

  19. User Avatar
    Roldan
    Permalink to comment#

    This is amazing!

    Worked for me! Thanks, more power!

  20. User Avatar
    Stephen
    Permalink to comment#

    Wicked thanks man, love easy wins.

    sf d-)=

  21. User Avatar
    Dylan
    Permalink to comment#

    Or… if an iFrame

    //www.youtube.com/embed/##########?wmode=opaque
    

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

    http://helpx.adobe.com/x-productkb/multi/swf-file-ignores-stacking-order.html

  22. User Avatar
    Greg
    Permalink to comment#

    Thanks man. This worked great!!

  23. User Avatar
    Alwin
    Permalink to comment#

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

  24. User Avatar
    De1an
    Permalink to comment#

    Another solution: <EMBED src="https://cdn.css-tricks.com/FlashAnimation.swf" type="application/x-shockwave-flash" wMode="Transparent">

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag