Need Help Making An Image Transparent!

Discussion in 'HTML & Website Design' started by Ratman2050, Oct 4, 2007.

  1. #1
    Alright so I downloaded this pack of Web 2.0 social bookmarking icons and then I uploaded them to my site and when I visit my website the for example Stumbleupon.ico is 16x16, I set the image width="32" height="32" but it just makes the .ico image blurry.

    Then I converted into .PNG and it is 512x512 so I uploaded it, and put the 32x32 limits on, it worked, but it had a black background.

    My questions is, how do I make it into a clear background to make it transparent in either .PNG or .GIF? thanks.

    Here is my code btw:

    <a href="http://www.stumbleupon.com/submit?url=http://www.thedevnetwork.com/" title="Stumbleupon"><img src="http://www.thedevnetwork.com/images2/Stumbleupon.gif" style="border:0" width="32" height="32"/></a>
    Code (markup):
    Here is the .PNG:

    [​IMG]


    EDIT: I learned how to do it you can close/delete this.
     
    Ratman2050, Oct 4, 2007 IP
  2. jDare

    jDare Guest

    Messages:
    218
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I have had the same problem and just changed it to a non-transparent background. How did you get this fixed? Please share.
     
    jDare, Oct 5, 2007 IP
  3. MetaCipher

    MetaCipher Peon

    Messages:
    55
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It's important to note that only FireFox and IE 7.0 support transparent pngs (IE 7.0 only supports full transparency, and not alpha channels; for example, if you make something 50% transparent it won't work in IE). If you want transparency in IE 6.0 or less, Google it and you should find some javascript code to hack around it.

    The icon you posted shows up just fine, btw...
     
    MetaCipher, Oct 5, 2007 IP
  4. Ratman2050

    Ratman2050 Well-Known Member

    Messages:
    2,748
    Likes Received:
    176
    Best Answers:
    0
    Trophy Points:
    155
    #4
    I fixed it by opening the image up in photoshop. Then I used the magic wand tool to select the background, press del and remove the background. Open a new document and select the option "transparent" and set the width and height. Then copy the image into the new document, then use the magic wand again on the background and it should show the white checkered background. then save it as .PNG, .JPG, or .GIF.

    You can view them here: http://www.thedevnetwork.com under syndication.
     
    Ratman2050, Oct 6, 2007 IP
    buffalo likes this.
  5. mariuspompier

    mariuspompier Peon

    Messages:
    323
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #5
    mariuspompier, Dec 15, 2007 IP