You are invited to Log in or Register a free Frihost Account!

Images with an invisible background.

I'm now building a site for about 2 months now + a forum. Nothing is in use yet. However I have some problems. Some very irritating problems.

I already made a topic about this a month ago without responses, so better luck this time.

On my site I use alot of pictures with an invisible background, go to ----> minigame guides in the navbar and then pick on eof the 2 guides I wrote. Don't mind the subject just look at the pictures and then u'll see what I mean with invisible background pictures or however you guys call it.

If you use FireFox then (ofcourse) there wont be problems. However I noticed that the big part of all people surfing the net, still uses Internet Explorer. This bothers me because I think I.E. It always has problems (with me).

So if you opened my site in FireFox then, no problems. Bu if you opened in it I.E. then you will see how ugly my site is. The background doesn't display the background of my site.

I need the background of the images to display the background of the page. So invisible. In Internet Explorer....

Another problem, for this i'll use my logo as an example.

Go to and look at the logo. You'll see it has a shadow effect. I have done that with Paint Shop Pro. I want that picture to be displayed with I.E. the correct way WITH THE SHADOW EFFECT.

I relay hate that I.E. is having problems with it, Maybe it is because I use a .PNG format for invisible background pictures???

If this is then what extention should i use?

Please post an answer.
Try GIF. But the picture wont be as sharp/detailed as PNG. But hey, IEers should better put up with that. You could always tell them to switch to FF. Razz
How do i get the background invisible with .GIF If i remove th ebackground and then safe as .GIF it displays a color as background.
{name here}
You need an advanced image editor like the GIMP to allow for the use of transparency(sometimes known as Alpha).
Internet Explorer 6 does not support PNGs with alpha-channel transparency.

There are workarounds. Instead of using those PNGs, convert them into GIFs which will look ugly anyway, or use DirectX (yay!) to show them in IE. Basically what you have to do is create a DIV with a background image and apply a DXImageTransform over it, which allows the alpha channel to be recognized. Compare that to your normal IMG tag.

Still, no cure for IE versions below 5.5.

I won't paste code here because you can find a much better tutorial at

If it still doesnt work, try to blend the title with the background and create a single image that looks continuous. Then just place it on your page in one place and you're done.
sush wrote:

If it still doesnt work, try to blend the title with the background and create a single image that looks continuous. Then just place it on your page in one place and you're done.

That is certainly the easiest option, though it can be difficult when the background is not a solid colour.

Another option is to have separate style sheets for IE and everything else, as many phpbb themes do.
You could also detect the browser type using java, and change the code accordingly that way.

This problem is annoying me as well, and I wish I could either force people to use Firefox, or force Microsoft to make IE work right (perhaps 20,000 complaints to their bug reporting section would work).
Arno v. Lumig

I am not sure if this javascript works, but this way you can make pngs transparant in iexplore 5.5 and 6.0.

Use Adobe Photoshop, paste your image in a transparent background, use the magic wand and select the unwanted (or white) background, and press the delete button. Then, save it as GIF. It will appear with a transparent background now.
Also in Photoshop, you could try using the Magic Eraser tool. Do it once at tolerance 72 and then again at tolerenace 32. It almost always does a great job at cleaning up the background and making it transparent.
These are simple steps to recreate your logo.png using Photoshop CS2

Using Photoshop, open the logo.png file.
You'll see a black background surrounding the "the nolifers" text.
Now, go to the top menu, choose Select - Color Range.
Make sure the Fuzziness level is set to maximum.
Click on the black background area on the logo which is located just below the Fuzziness level.
As you click, the background now change to white. Click OK.
Press Delete key on your keyboard. The logo background has turned to white.
Choose Select - Inverse.
Right click on the logo area and choose Layer via Cut.
Go to the Layers panel (normally located on the right). If the panel does not appear, press F7.
While pressing down Ctrl key, click on Layer 1.
Double click the small thumbnail of Layer 1, Layer Style menu appears.
On the left side of the menu, check the Drop Shadow option and click on the word "Drop Shadow" to go to its menu. You can modify the options according to your needs. Click OK. Now you'll see your logo has a drop shadow.
On the Layers panel, right click on the Background layer, and choose Delete Layer.
Now you can save the file as a .gif file. A menu comes out, just click OK and OK.
Related topics
W3C buttons without images
Cloudy Background
Top 10 web design mistakes!..
SMU2:: Brilliantbeauty's Graphic shop!
How to use only one directory for image files ?
Background Images
Question: multipel background images simultaneously
CSS mismatch IE <> Firefox
ps vs psp
2 Background images, picture borders, transpaernt backgounds
Tables to Divs with rowspans
Like bing search background images??
Background images not displaying in FF
Reply to topic    Frihost Forum Index -> Computers -> Software

© 2005-2011 Frihost, forums powered by phpBB.