sobreponer imagenes de fondo en capas

alberto_mdp · #1 (**permalink**) 20/09/2010, 08:02

Amigos,

Luego de pasarme el fin de semana probando muchas formas de conseguir que una imagen se vea como background.
Este fue mi mejor resultado [URL="http://bit.ly/9nmm41"]http://bit.ly/9nmm41[/URL]

Un psecudo CSS seria

Código HTML:

 <div id="header"> <!-- Background imagen grande -->
                <div id="menu"/> <!-- Div anidado con background imagen-->
                  texto..images...
                <div id="frame">texto</div> <!-- Div anidado con Background color-->
                <div id="menuframe"/> <!-- Div anidado con Background color -->
            </div>

Entonces, lo que quiero lograr, es que una imagen grande (donde salen las personas en mi ejemplo) se vea encima de los otros backgrounds de los divs anidados (que aparecen como franjas en mi ejemplo).
He intentado, divs anidados con background-image y background-color, pero ninguno de los dos me funciono.

Mi css/ html es el siguiente

Código:

#main {
    border: 1px solid #909092;
    width: 800px; /* 775px; */
    margin: auto;
}

#header {
    background-image: url('../images/pl.png');
    background-repeat: no-repeat;
    background-position: right top;
    height: 279px;
    z-index: 5;
}

#menu {
    background-image: url('../images/b_copy.gif');
    color: white;
    height: 40px;
    z-index: -1;
}

#menu li {
    display: inline;
    list-style-type: none;
}

#frame {
    background-color: black;
    height: 150px;
    z-index: -1;
}

#menuframe {
    background-color: maroon;
    height: 32px;
    z-index: -1;
}

y mi html

Código HTML:

 <body>
        <div id="main">

            <div id="header">
                <div id="menu">
                    <ul>
                        <li>Home |</li>
                        <li>About |</li>
                        <li>Events |</li>
                        <li>Services |</li>
                        <li>Gallery |</li>
                        <li>Contacts </li>
                    </ul>
                </div>
                    <img src="images/tl.png" alt="Event Planner co." >
                <div id="frame">
                    <h1>For Unique Moments...</h1>
                    <h2>choose professionals to run your event</h2>
                    <p>
                        At hero eos et accusan et justo du
                        dolores et ea consetetur sadi pscing elitr, sed diam nonumy
                        eirmod Erat, sed diam voluptua. sadi pscing elitr, sed
                    </p>
                </div>
                <div id="menuframe">
                    Home
                    Info
                    Contacts
                </div>
            </div>
        </div>
       <!-- Aca va el resto del body -->
    </body>