Overlaying an image or content on top of Flash

Whether it’s a popdown submenu that drops over the top of your Flash slideshow, or some graphic element you want to put over Flash content (such as a design element like an ornament or rounded corner as part of your page design that encroaches the boarder of your Flash presentation so it’s not forced to a rectangle), you may have encountered problems.

You may think you can conquer it with some clever CSS, just use positioning and set the z-index of the Flash object less than that of the element you want in front, right? Well, yes you need that, but there’s one other trick.

You have to set Flash’s “wmode” to “transparent.”

For most browsers that is an “embed” parameter: wmode=”transparent”
For IE it is an “object” parameter.

And the CSS:
In the Flash “Object,” style=”position: relative; z-index: 0;”
Same thing in the element above, but “z-index: 1;” (or more)

One response to “Overlaying an image or content on top of Flash”

  1. Rand Avatar

    Yeah, in 2010 when I wrote that blog post, I still had some Flash in use. I now dub that blog article obsolete. Do NOT use Flash anymore. Use HTML5. It is way more important that your site works great on mobile devices than the dwindling old browsers that don’t support HTML5.

Leave a Reply

Your email address will not be published. Required fields are marked *