greying out only background image and not elements within : CSS

Question

I have a background image for the wrapper div of a page. I want the image to be 0.5 opaque. My problem is that all other items inside the div also become 0.5 opaque. How can this be avoided?

#detailswrapper
{   
    background-size:cover; 
    background-repeat: no-repeat; 
    opacity:0.5;    
}

Answer 1

you can use something like this

JS Fiddle

div::after {
    content:"";
    background: url('http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg');
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}