Images with an invisible background.

tom69

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 www.nolifers.com ----> 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. realy...sucks. 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 www.nolifers.com 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.

guissmo

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

tom69

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).

sush

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 http://homepage.ntlworld.com/bobosola/index.htm.

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.

ocalhoun

Arno v. Lumig

http://snipplr.com/view/270/ie-55--ie6--png-transparency-fix-prototype-required/

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

Goodluck,
Arno

orcaz

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.

AdvancedNinja

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.

s.emasintan

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.
Finished.