Take the 2-minute tour ×

I want to give opacity for the div only at the bottom left corner. Is it possible? how?

<div id="right_img"></div>


     background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;

If I give opacity to the complete div, image clarity will be lost.

share|improve this question
I dont think that opacity can be given to a specific region of an element with CSS, unless you use CSS grandients with RGBA. Maybe you have an example of what you want to accomplish, like a mockup? –  Dbugger Jul 31 '12 at 7:45
Use html5 canvas & javascript to do these kinda stuff. –  SVS Jul 31 '12 at 7:54
add comment

2 Answers

up vote 2 down vote accepted

Giving Opacity to an element always affects the whole element and all of its child-elements too. If you want to give only one of it's children the opacity property, you have to declare it directly on that element. Sometimes you have to introduce some helper Elements to achieve the effect you want.

Exception is the opacity you declare on colors which don't get inherited to the child elements. With the new rgba() declaration, (the fourth parameter is the opacity of the color), you can achieve effect like having a "transparent" div (transparent background) but the font is completely opaque.

In your case it might be sufficient (interpreting your answer - it wasn't quite clear) to just use the normal background-declaration with this rgba background-color:

   background:rgba(x,y,z,0.6) url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;

with x,y,z = 0...255 and a = 0...1

Note, that the rgba() declaration is not supported in older IEs (even IE8!). You need a filter to support these. Luckily there is one:

           endColorstr  =#aaxxyyzz);

where the first parameter (a) is the opacity with 0% = 00 and 100% = FF. And xx,yy,zz = 00...FF.

share|improve this answer
Thank you,very helpful ... –  prash Jul 31 '12 at 8:45
add comment

Use a PNG image instead and make the transparency part of the image?

share|improve this answer
I will try this ,thanks –  prash Jul 31 '12 at 8:50
add comment

Your Answer


