Opacity for background images

[karthik_ppts]

Hi Frendz,
How to set opacity for background images?

[karthik_ppts]

I tried this but foreground text also got the opacity property. But i needonly in the background images.

td{
	background-image:url(forest.jpg);
	filter:alpha(opacity=20);
	height:100%;
	opacity:.90;
}

[Dandello]

Try wrapping the foreground images and text in a tag that will allow you to set opacity and alpha independent of the background.

[karthik_ppts]

Try wrapping the foreground images and text in a tag that will allow you to set opacity and alpha independent of the background.

Tried that too. Its not working

<td style="background-image:url(images/report_events.png); background-repeat:no-repeat; background-position:center;filter:alpha(opacity=20);opacity:0.2;">
                    	<div>
                            -----------
                            -----------
                            -----------
                    	</div>
                    </td>

[ushajase]

hi,
try this,

<div style="position:relative; ">
<div style=" background-image:url(kitchen/gibbsandsoelleb47_rgb.jpg); opacity:0.5;
filter:alpha(opacity=40);height:520px; width:520px;">
</div>

<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px; width:500px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

[karthik_ppts]

hi,
try this,

<div style="position:relative; ">
<div style=" background-image:url(kitchen/gibbsandsoelleb47_rgb.jpg); opacity:0.5;
filter:alpha(opacity=40);height:520px; width:520px;">
</div>

<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px; width:500px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

thanks for your valuable reply. But this code only works for fixed height divs. My div is auto height. What i do for that?

[karthik_ppts]

hi,
try this,

<div style="position:relative; ">
<div style=" background-image:url(kitchen/gibbsandsoelleb47_rgb.jpg); opacity:0.5;
filter:alpha(opacity=40);height:520px; width:520px;">
</div>

<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px; width:500px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

Post your code with code tags.....

[ushajase]

oho k.

[ushajase]

what type of background image have you used for that? is it repeated image?

[karthik_ppts]

what type of background image have you used for that? is it repeated image?

No... Its just an single image(png).

[ushajase]

No... Its just an single image(png).

karthik,
you can reduce the opacity of image in Photoshop and save .png format.then no need to
reduce image opacity in CSS.it will be transparent.
if you use this method, you have to set height. otherwise you can use java script. i don't know exact code of java script.if i got, i'll tell you.

[karthik_ppts]

karthik,
you can reduce the opacity of image in Photoshop and save .png format.then no need to
reduce image opacity in CSS.it will be transparent.
if you use this method, you have to set height. otherwise you can use java script. i don't know exact code of java script.if i got, i'll tell you.

Ok.. i'll try

[Edge330]

Use PS to set opacity and save file in png format

[Dandello]

Just checked my books - opacity is inherited. Period.
The recommendation is to set the alpha transparency in your png file, then use a behavior work around for MSIE. As in

behavior: url(iepngfic.htc);

This involves getting a copy of the 'iepngfix.htc' file but a web search should find it for you.