Grow your CSS skills. Land your dream job.

Last updated on:

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. 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 !

    • 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

    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.

  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.
    Thanks
    Paritosh

  18. 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. Wicked thanks man, love easy wins.

    sf d-)=

  21. 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

    • Dylan
      Permalink to comment#

      ah, someone already posted that… suppose I should have read a while longer.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".