making certain parts of a background image transparent

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Xcellers
New Member
New Member
Posts: 7
Joined: Mon Apr 09, 2007 2:07 pm

making certain parts of a background image transparent

Post 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!
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: making certain parts of a background image transparent

Post 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
Xcellers
New Member
New Member
Posts: 7
Joined: Mon Apr 09, 2007 2:07 pm

Re: making certain parts of a background image transparent

Post 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
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: making certain parts of a background image transparent

Post 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.
Last edited by kermit on Thu Nov 22, 2007 11:25 am, edited 1 time in total.
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: making certain parts of a background image transparent

Post 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
Post Reply

Return to “Layout and Design (CSS & HTML)”