Setting a div background image Opacity [duplicate] - css

Question

This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 3 years ago.
I was trying to set the opacity of a image which is the background image of the div. When I used opacity=0.5, then it says "opacity is not known to CSS".
<div style="background-image:url('../Images/MainBackground.jpg');
opacity=0.5" class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
Then I changed the code from the sitemaster page to a seperate css file as shown below.
.main
{
background-image: url('../Images/MainBackground.jpg');
height: 100%;
opacity=0.5;
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
here also it says opacity is not known to css.
I want to set the opacity of div's background image to 0.5. Any help ?
I am using VS 2010 (C# 4.0)

Answer 1

Although the other answer is technically correct, in your case you want the opacity of the background not the entire .main container. You cannot set the background image opacity without affecting the child elements of the page. If you have a white background, you can create a child element that has a width and height of 100% with an opaque white background that will contain the data inside.
<div class="main">
<div class="opaque">
// your content here
</div>
</div>
And the styles with rgba color "white" and 0.5 opacity
<style>
.main {
background-image: url('../Images/MainBackground.jpg')
}
.opaque {
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.5)
}
</style>