Setting a div background image Opacity

Question

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)

https://www.w3schools.com/css/css_image_transparency.asp – VDWWD Aug 02 '19 at 17:53 — VDWWD, Aug 02 '19 at 17:53

score 0 · Answer 1 · answered Aug 02 '19 at 18:08

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>

I tried with this. But not working as expected. – Jassim S Aug 03 '19 at 09:46 — Jassim S, Aug 03 '19 at 09:46

Setting a div background image Opacity

1 Answers1