Foros del Web » Creando para Internet » CSS »

sobreponer imagenes de fondo en capas

Estas en el tema de sobreponer imagenes de fondo en capas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/09/2010, 09:02
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1
Antigüedad: 7 años, 2 meses
Puntos: 0
sobreponer imagenes de fondo en capas

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> 

Etiquetas: capas, fondo, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:33.