css opacity without affecting the content

Please how do i write a css rule for a background to have opacity such that the opacity will not affect the content i’ll place on the background. e.g is my background color is white with opacity 0.5, i need the content to be 1, i dont want to css rule to affect the content. thank you.

Post your code sample here.

All contents comes here

#cover { background: url: images/bgr; opacity:0.5; }
#inner-content { all kinds of css rules; }

i want the opacity rule to affect only #cover, it should not affect the content

Have you tried overriding the parent opacity property in the child?

#cover { background: url: images/bgr; opacity:0.5; }
#inner-content { opacity:1; all kinds of css rules; }

since you are using ID selector, it shud work.

i just found out that i didn’t use background image for the cover, i used background color, but i ll still try what you wrote out. Thanks