Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

How to make background image transparent




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

5+ Year Member

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;
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?



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

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

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)

WebmasterWorld Senior Member 10+ Year Member

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.



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

5+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month