PNG's transparency in IE (all versions)

Discussion in 'Graphic Design' started by dragon2309, Mar 23, 2007.

to remove all ads.
  1. dragon2309

    dragon2309 New Member

    Messages:
    6
    Hi, anyone have a hack or workaround for viewing transparent PNG's in IE. There are several solutions out there but they are all designed on you actually embedding the image on the page in <img src> tags, the PNG's i need to hack are referenced by external CSS file, so are unaffected by these solutions.

    Anyone found one or got one that works with images based on being referenced in by CSS...?

    Cheers, dragon ;)
     
  2. dragon2309

    dragon2309 New Member

    Messages:
    6
    bump, anyone?
     
  3. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    sorry, but i do not understand your question.
     
  4. dragon2309

    dragon2309 New Member

    Messages:
    6
    what part of it? basically, in a div layer i assign it a css class, within that class i define its background image, thats all done in the css file, that background image file is a semi-transparent PNG image.

    IE cannot display transparent PNG's properly, there are several hacks and workarounds for this but they all revolve around the PNG's being embedded (as in, they use the <img src="sdkfhdjfh"> tags) i need one that can interface with my CSS sheets and do the same to the PNG's being referenced in there...

    dragon2309
     
  5. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    ah, i see what you are saying now. unfortunetly i have never tried using a transparent png for a background image, so i don't have answer for ya. sorry.
     
  6. dragon2309

    dragon2309 New Member

    Messages:
    6
    ok, not to worry
     
  7. kiko_friendly

    kiko_friendly New Member

    Messages:
    305
    There is a code to remove anything white in an image - make sure you set any colour you DON'T want removed to something off white. It wont look nice unless edges are EXACTLY perfect - Can only be done in MS Paint.
     
  8. dragon2309

    dragon2309 New Member

    Messages:
    6
    Come again? I'm a bit confused on that post? THe PNG's are semi transparent already, so there is no white in them, it's only IE's crappy handling techniques and the fact it was never "taught" how to handle them properly that makes anything transparent appear a white-ish grey colour.

    dragon2309
     
  9. aswebdesign

    aswebdesign New Member

    Messages:
    6
  10. dragon2309

    dragon2309 New Member

    Messages:
    6
    Hi, i've tried that one already, unfortunately it only applies to <img> tags inside the HTML body, the only mention of CSS is the fact that it is a solution powered by CSS, it doesnt actually affect the images referenced by CSS

    dragon2309
     
  11. kiko_friendly

    kiko_friendly New Member

    Messages:
    305
    Save the image as a transparent .gif image.

    Ignore the above idiocy. :p

    IE doesn't like transparent pngs for some reason. Example of the transparent gif ;

    http://seaessess.the-rise.co.uk/

    No code needed, just save as a transparent gif...yupyup.

    EDIT : The white greyish colour, yep. You are having the exact problem I was having about a year ago when I was making the above website. This is definitely the solution. However, want to keep it png? I don't even think that's possible...
     
    Last edited: Apr 10, 2007
  12. bcackerman

    bcackerman New Member

    Messages:
    50
    ya, well IE6 doesn't support PNG's, just so you guys know. i believe IE7 does. i hae an idea...lets get everyone off IE, haha...i wish
     
  13. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    i second the motion. :)
     
  14. Mnemonic

    Mnemonic New Member

    Messages:
    2
    I do beleive this is the workaround for the problem in css...

    background:transparent url(background.png) no-repeat top right;
    _background-image:url(background.gif);
     

Share This Page