How to make background transparent for a image

[HolÿCow]

I want the background of image to take the color of my webpage automaticaly.
How do i do that.
plz help. I have a jpg image with white background, I have it should take the background color of my webpage automaticaly when i insert it on my webpage.
I want the background to change from white to my page color.
I want the image to haveno background and the image should take the bakcground color of my webpage.

[jscheuer1]

This can be done automatically only if the image is in the .gif or .png format. In those formats, areas of the image may be set to be transparent. In the .jpg format (which is superior for many images) the background would need to be the color that you want it to be, no transparency is available in the .jpg format.

IE may have a filter (I'm thinking the 'chroma' filter) for this that could set a color value in any image to be rendered as transparent but, this would only work in IE which is no longer so dominant as to justify the use of such methods except as an IE only fall-back for some other, more universal method that IE doesn't support.

[ItsMeOnly]

IE 7 finally has support for alpha-blending in RGBA PNGs (it has , however, some personality problems- old workarounds will not work any longer- breaking the layout horribly, while standard complance is still out the window)

[jscheuer1]

IE 7 finally has support for alpha-blending in RGBA PNGs (it has , however, some personality problems- old workarounds will not work any longer- breaking the layout horribly, while standard complance is still out the window)

Well, you mean IE 7 beta. Hopefully backward compliance will be achieved with IE 6 before final release. If not, most likely the use of IE version specific comments will provide a workaround, ex:

<!--[if lte IE 6]>
HTML level code (tagged scripts are included) for IE 6 and earlier can go here
<![endif]-->

These can even be nested to select only a range of versions:

<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
code here for IE 5.5 through IE 6
<![endif]-->
<![endif]-->

[ItsMeOnly]

ehem, yes, that's how I was using it.

But I'm refering to something even more annoying: testing my site with 7rc1 revealed something completely idiotic.

first of all, while finally they support objects type="text/html" they didn't fix javascript for that (I'm using that to kill iframes in my "strict" layout), so for example parent.document.getElementById means the same as document.getElementById called from object (FF and Opera work fine, treating "parent" as parent of object and not... well, if anything), also js formatted window.open and location.href still do not generate "refering uri", which breaks my viewer completely (got rid of targets).

IE7 will not fix the margin problems (commented by IE team spokesman on feedback and bug reporting), nor will address display: table*. which pisses me off largely, because neither IE 6 workaround function, nor I can use tableles layouts anymore, it will just go nuts).

Another bad thing is that floated divs can get out of parent bounaries, or behave erratically, just "because", on IE 6 they've been working without problems (just with the margin bug- i.e. "what part of '100%' you don't understand").

of course, you can forget about application/xhtml+xml application/xml text/xml, still doesn't work (while dear old FF1.0.4 from 2004 displays it just great). check this out http://rambo.id.uw.edu.pl?serve=xml

Rambo

[jscheuer1]

Just another note before we leave the subject of .png alpha channel support in IE 6. With the alpha filter, it can usually be worked out to look identical to the way other modern browsers do it.

Some of the other subjects you touch on I have not encountered much or have just kludged my way through using alternate style for IE. There is almost always a way.

When you mention 'parent.document' - that should be the document that holds the frame or iframe through which the current page is showing, or the page itself - if it is the 'top' document. If you are referring to to the nodes of an element (it isn't clear whether you are or not), the consistent way is:

document.getElementById('id').parentNode

If you are having trouble accessing elements on the parent document, a function can be placed on the parent to handle that and accessed via:

parent.functionName('optional', 'arguments');

The behavior of floated content in IE 6 is as though it already had an element placed below it with clear:both, which is what you need to do to get other browsers to behave as IE 6 does with floated content. The other browsers have it right and perhaps what you are mentioning is that IE 7 now follows the standard model.

I know that when IE 7 finally is released, it will probably require new kludges and workarounds. I'm just hoping that these will be less than the various betas would imply and I've chosen for now to ignore that browser (for the most part) until full release.

[ItsMeOnly]

continued on http://www.dynamicdrive.com/forums/s...2838#post52838