Question

i am trying to display a gradient style around my image. This works. When the image is not there ie src=”” then I would still like to display this gradient style?

html

<style>
    .mystyle
    {
        position: relative;
        float: right;
        right: -1px;
        margin: 0;
        padding: 12px 0;
        background-image: -moz-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*FF3.6+*/
        background-image: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,1)),color-stop(50%,rgba(255,255,255,.625)),color-stop(100%,rgba(0,0,0,.25))); /*Chrome,Safari4+*/
        background-image: -webkit-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*Chrome10+,Safari5.1+*/
        background-image: -o-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*Opera 11.10+*/
        background-image: -ms-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*IE10+*/
        background-image: linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,.625) 50%,rgba(0,0,0,.25) 100%); /*W3C*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#40000000',GradientType=1); /*IE6-9*/
    }
</style>
<div id="mydiv" class="mystyle">
    <img id="img1" src=Chrysanthemum.jpg style="border-width: 0px;">
</div>

Answer 1

You can give opacity to your IMG like this:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}