You need wmode:opaque or wmode:transparent on both swf's. --Kyle
-------------------------------------------------- From: "Turkeypants" <[EMAIL PROTECTED]> Sent: Tuesday, November 04, 2008 9:14 PM To: "SWFObject" <[email protected]> Subject: Scaling SWF background with XHTML/CSS page > > Hi- > > I am a noob to SWFObject, and I have read the existing posts here on > SWFs as backgrounds, but none of the remedies seem to work. I am using > the static method to place a floating SWF at the top right corner of > my page (works great), but I also want to place a scaling SWF as the > background of the page, behind the content. I can get the background > to scale to full-browser size, but I can't get the HTML/CSS content to > overlay it with a higher z-index. > > Here is my impotent code: > > - - - > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// > www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en"> > > <head> > <title>Mount Olympus News</title> > <script type="text/javascript" src="swfobject.js"> > </script> > <script type="text/javascript"> > swfobject.registerObject("hotNews", "9.0.0", "expressInstall.swf"); > swfobject.registerObject("backgroundpattern", "9.0.0", > "expressInstall.swf"); > </script> > > <style type="text/css"> > html { > height:100%; > } > > body { > font-family: georgia, serif; > font-size: small; > margin: 0; > padding: 0; > height:100%; > } > > #ubercontainer { > position:relative; > z-index:0; > height:100%; > } > > #container { > height:100%; > width:800px; > position:relative; > margin-left:auto; > margin-right:auto; > background-color:#FFFFFF; > z-index:100; > } > > #header { > height:150px; > padding:0 25px; > background-color:#B5E2EF; > } > > #extras { > width:15em; > position:absolute; > top:170px; > left:0 > padding-left: 1em; > } > > #main { > margin-left:17em; > } > > ul { > padding: 0px; > } > > li { > list-style: none; > margin: 10px 0; > } > > #hotNews { > position:absolute; > top:-5px; > right:0px; > } > </style> > > </head> > > <body> > <div id="ubercontainer"> > <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" > width="100%" height="100%" id="backgroundpattern"> > <param name="movie" value="background.swf" /> > <param name="play" value="true" /> > <param name="loop" value="true" /> > <param name="menu" value="false" /> > <param name="quality" value="best" /> > <param name="scale" value="exactfit" /> > <param name="wmode" value="opaque" /> > <!--[if !IE]>--> > <object type="application/x-shockwave-flash" data="background.swf" > width="100%" height="100%"> > <param name="play" value="true" /> > <param name="loop" value="true" /> > <param name="menu" value="false" /> > <param name="quality" value="best" /> > <param name="scale" value="exactfit" /> > <param name="wmode" value="opaque" /> > <!--<![endif]--> > <a href="http://www.adobe.com/go/getflashplayer";> > <img src="http://www.adobe.com/images/shared/download_buttons/ > get_flash_player.gif" alt="Get Adobe Flash player" /> </a> > <!--[if !IE]>--> > </object> > <!--<![endif]--> > </object> > </div> > <div id="container"> > <div id="header"> > <h1>Mount Olympus News</h1> > </div> > <div id="main"> > <h2>Prometheus Heats Things Up</h2> > <p>Prometheus did not care to live amid the clouds on the mountain > top. He was too busy for that. While the Mighty Folk were spending > their time in idleness, drinking nectar and eating ambrosia, he was > intent upon plans for making the world wiser and better than it had > ever been before. </p> > </div> > <div id="extras"> > <h2>Links to Stories</h2> > <ul id="stories"> > <li><a href="">Jupiter & His Mighty Company</a></li> > <li><a href="">The Golden Age</a></li> > <li><a href="">The Story of Prometheus</a></li> > </ul> > <h2>News</h2> > <ul> > <li><strong>Pandora opens the box!</strong><br /> > Disease and sorrow released to plague mankind for eternity. <a > href="#">More...</a></li> > <li><strong>Welcome to Hellenes.</strong><br /> > Son of Prometheus escapes the great flood and creates a new > society from tossed stones. <a href="#">More...</a></li> > <li><strong>A Tangled Web</strong><br /> > Arachne loses weave-off; is changed into a spider. <a > href="">More...</a></li> > </ul> > </div> > <div id=hotNews> > <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" > width="160" height="160" id="hotNews"> > <param name="movie" value="ball_burst.swf" /> > <param name="play" value="true" /> > <param name="loop" value="true" /> > <param name="menu" value="false" /> > <param name="quality" value="best" /> > <param name="scale" value="noscale" /> > <param name="wmode" value="transparent" /> > <!--[if !IE]>--> > <object type="application/x-shockwave-flash" data="ball_burst.swf" > width="160" height="160"> > <param name="play" value="true" /> > <param name="loop" value="true" /> > <param name="menu" value="false" /> > <param name="quality" value="best" /> > <param name="scale" value="noscale" /> > <param name="wmode" value="transparent" /> > <!--<![endif]--> > <a href="http://www.adobe.com/go/getflashplayer";> > <img src="http://www.adobe.com/images/shared/download_buttons/ > get_flash_player.gif" alt="Get Adobe Flash player" /> </a> > <!--[if !IE]>--> > </object> > <!--<![endif]--> > </object> > </div> > </div> > </body> > </html> > > - - - > > Thanks! > > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "SWFObject" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/swfobject?hl=en -~----------~----~----~----~------~----~------~--~---
