Foros del Web - Ver Mensaje Individual

kidart · #1 (**permalink**) 28/12/2011, 10:27

hola,

les hago una consulta: tengo un html que contiene 2 divs, uno con un jpg de fondo y otro con un swf.

Quiero posicionar el swf delante y el fondo atras, pero no lo consigo. Si pongo el swf delante con z-index no me aparece el fondo. Si quito el z-index, aparece el jpg del background por delante del flash.
el codigo que estoy usando es el siguiente:

Código HTML:

Ver original<!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>Alain Marcus | Photo et Musique</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #000000;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { 
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto; 
        text-align:center; 
        z-index:2;
        }
        #bg {
            position:fixed; 
            top:-50%; 
            left:-50%; 
            width:200%; 
            height:200%;
            z-index:-1;
 
        }
        #bg img {
            position:absolute; 
            top:0; 
            left:0; 
            right:0; 
            bottom:0; 
            margin:auto; 
            min-width:50%;
            min-height:50%;
            z-index:1;
        }
        
        </style>
    </head>
    <body>
        <div id="flashContent">
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="950" height="800" id="alain_marcus" align="middle">
                <param name="movie" value="alain_marcus.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#000000" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="transparent" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="alain_marcus.swf" width="950" height="800">
                    <param name="movie" value="alain_marcus.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#000000" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="transparent" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <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="bg">
        <img src="images/fondo_1.jpg" alt="" border="0">
    </div>
    </body>
</html>