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>