backbone: Make HTML body background image transparent

samedi 4 avril 2015

Make HTML body background image transparent

I am trying to make my background image transparent, and the rest of the page not transparent, eg a faded background image on top of non faded HTML and CSS.

I have an HTML page with an image as the background using a div. Below is a simplified version of the page:


<HTML>

<head>

    <style type="text/css">
        #backgroundImage {
            background-image: url('../Documents/images/Sea.jpg');
            background-repeat: no-repeat;
            background-size: 100%;
            opacity: 0.4;
            filter:alpha(opacity=40);
            height:100%;
            width:100%;
            z-index:0.1;
        }

        .main{
            height:500px;
            width:900px;
            margin:auto;
            background-color:green;
            z-index:1;
            opacity: 1;
            filter:alpha(opacity=100);

        }
    </style>


</head>


<body>

<div id="backgroundImage">

    <div class="main">

    </div>

</div>

</body>