Welcome to WebmasterWorld Guest from 54.225.58.238

Forum Moderators: not2easy

Message Too Old, No Replies

How to make background image transparent

transparency

     
10:52 pm on Aug 4, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Oct 28, 2006
posts: 44
votes: 0


I have just a small tile that I set to background-repeat:repeat; and I tried with gif amd png

With gif the transparency works but the text is also transparent above the image

this is the div where I include the backgorund image

.node {
padding-top: 15;
padding-right: 0px;
padding-bottom: 15;
padding-left: 0;
background-image:url(images/nodebackground.png);
background-repeat:repeat;
float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
filter: Alpha(Opacity=25;
}

So can somebody explain how to make it transparent, but only the image not the text - does it work with png or gif?

thanks

2:32 pm on Aug 5, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


You can't set only the background image to be transparent (via opacity). Setting opacity will apply to the entire node, including background and foreground.
5:19 pm on Aug 5, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2173
votes: 13


The best thing you can do is lighten the picture part of the image in some photo program and leave the text as dark as you want. If you are using a .png image, be aware that IE6 makes transparent areas grey. So if you can, have a background color in the image even if it is white.

Marshall

6:26 pm on Aug 5, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Oct 28, 2006
posts: 44
votes: 0


Just as I though so, too bad it does not work

It does not work even with 50% opacity of gif?

Is that true

8:33 pm on Aug 5, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


As Marshall indicated, using an image editing program and reducing the opacity should allow you to 'lighten' the image to any degree that you like, and that darker text should lay right over top very nicely.

I usually use (or convert) .jpgs (.png are not ready for 'prime time' yet). Don't use a lot of .gifs when working with my own images. What is the background color of the .gif - does it have one or is it fully transparent already? I would suggest continuing to practice and work with various options.