954,593 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Opacity for background images

Hi Frendz,
How to set opacity for background images?

Karthik_pranas
Posting Pro
564 posts since Feb 2011
Reputation Points: 96
Solved Threads: 97
 

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;
}
Karthik_pranas
Posting Pro
564 posts since Feb 2011
Reputation Points: 96
Solved Threads: 97
 

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

Dandello
Posting Whiz in Training
263 posts since May 2010
Reputation Points: 28
Solved Threads: 23
 
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>
Karthik_pranas
Posting Pro
564 posts since Feb 2011
Reputation Points: 96
Solved Threads: 97
 

hi,
try this,






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.

ushajase
Newbie Poster
18 posts since Jun 2011
Reputation Points: 21
Solved Threads: 1
 

hi, try this,

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.

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_pranas
Posting Pro
564 posts since Feb 2011
Reputation Points: 96
Solved Threads: 97
 

hi, try this,

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.


Post your code with code tags.....

Karthik_pranas
Posting Pro
564 posts since Feb 2011
Reputation Points: 96
Solved Threads: 97
 

oho k.

ushajase
Newbie Poster
18 posts since Jun 2011
Reputation Points: 21
Solved Threads: 1
 

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

ushajase
Newbie Poster
18 posts since Jun 2011
Reputation Points: 21
Solved Threads: 1
 
what type of background image have you used for that? is it repeated image?


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

Karthik_pranas
Posting Pro
564 posts since Feb 2011
Reputation Points: 96
Solved Threads: 97
 
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.

ushajase
Newbie Poster
18 posts since Jun 2011
Reputation Points: 21
Solved Threads: 1
 
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

Karthik_pranas
Posting Pro
564 posts since Feb 2011
Reputation Points: 96
Solved Threads: 97
 

Use PS to set opacity and save file in png format

Edge330
Newbie Poster
6 posts since Sep 2011
Reputation Points: 10
Solved Threads: 0
 

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.

Dandello
Posting Whiz in Training
263 posts since May 2010
Reputation Points: 28
Solved Threads: 23
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: