Can you help me figure out how to apply a background image to the menu while still keeping the background color?
HTML:
<div class="top">
<div class="menu">
Nop.
</div>
Nam hendrerit erat eget tellus mollis facilisis. Mauris eget est ullamcorper, cursus massa quis, sollicitudin nulla. Vivamus rutrum blandit odio, vitae iaculis velit placerat et. Praesent et mauris et massa molestie laoreet. Phasellus pharetra id leo sit amet semper. Pellentesque ipsum velit, viverra non turpis nec, tristique consequat velit. In felis erat, ullamcorper ut ultricies ac, feugiat malesuada nunc.
</div>
CSS:
.top {
background: url('http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg');
opacity: 0.7;
}
.top .menu {
background: #dedede;
}
Check out the code on JSFiddle: http://jsfiddle.net/ZXeQk/
I'm struggling to get the opacity to only affect the background image and include the menu. Any ideas? Thanks!
Edit: You can see an example of what I'm trying to achieve in this image ().