Page 1 of 1

making certain parts of a background image transparent

Posted: Wed Nov 21, 2007 6:57 pm
by Xcellers
Hi all

ive finaly gotten off my ass and started work on my site again and i now have a semi working result, now, im in the process of tweaking the CSS to my liking - quite hard when 50% of my "1337 haxx0r skillz" are guesswork ;) - but learning by doing seems to work perfectly fine (to be honest i dont really know anything about coding, cept for the small bits ive picked up over the years)

anyways, back on track.

im running a graphic heavy site, with a seamless texture background - my main areas uses another background (image like) but im having some troubles making it look "just right"

the background on my text area has certain parts of it that i would like to have transparent/invisible - however i have no idea if that is possible or not - i figured that there might be a colour i can choose in Photoshop that in essense will be invisible on the actual site - atm. i have just copyed parts of the seamless background texture in, but offcourse it doesnt fit.

so in essense, my question is:

Is it possible, to designate a colour, that will not be shown on the website on an image?

hopefully there is, and i can have an easy time with this, else..well guess i gonna work something out then

Cheers all, hope some of you can help!

Re: making certain parts of a background image transparent

Posted: Thu Nov 22, 2007 8:45 am
by KO
You might need to use GIF image with alpha (transparent) channel for doing that. jpg does not have alpha channel. png has it and you can set transparency between 0-255 or something. Unfortunately IE6 will not understand it without special tricks and even then it's not really reliable. Seems that even IE7 has some problems. search pngfix for IE6 (google)and you might find some info. Notice that some of that is for normal images and not for background images.

br, K

Re: making certain parts of a background image transparent

Posted: Thu Nov 22, 2007 10:26 am
by Xcellers
hmm, so the only "safe method" is to use *.gif´s to do it? i am using *.png for most of the site

Re: making certain parts of a background image transparent

Posted: Thu Nov 22, 2007 11:24 am
by kermit
KO wrote: You might need to use GIF image with alpha (transparent) channel for doing that.
i'm sure KO meant to say PNG, not GIF.. as he did later in the reply..

GIFs don't do anything better than 256 colors and they don't do alpha transparency.

Re: making certain parts of a background image transparent

Posted: Thu Nov 22, 2007 11:32 am
by KO
You find several ways to fix IE6 png with javascript but there might be some problems them also. Most those have to do with the fact that it takes short time before the fix kick in.

Recently there was solution that someone posted that can be found http://forum.cmsmadesimple.org/index.ph ... 730.0.html
I have not tried that personally.

Gif's have transparent color but it's eighter transparent or not (some other color). Nothing between there where png would be great.

Hope this helps,
K