View topic - PNG Transparency in backgrounds

Stylegala Forums » Forums list » Problem solving

PNG Transparency in backgrounds

Author	Message
Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Apr 09, 2006 05:18 I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background. I have found a site that does have working png transparent backgrounds here: http://thedesignspace.net/css/transparentPNG.htm For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does. My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff. Any help would be greatly appreciated

Sponsor

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Apr 09, 2006 06:17 hi cody, Leave it to me to google up a whole list of goodies, added this last check out Bill Poster's Post HERE on SG. The rest is all background info for myself the subject was new to me... good luck. If you're using alphaImageLoader AIL. You've probably seen this old article on alistApart pngOpacity Looking for some newer references then since that article is 2002. Something newer from ALA: [url=http://www.alistapart.com/articles/cssdrop2] CSS Drop Shadows II: Fuzzy Shadows [/url] from April 23, 2004 (fresher info anyways) Finally some code snipped from Jason Carlin's post over at 456BereaStreet you might like this then: "Maybe this is a dumb question, but... how come no one ever uses the MS AlphaImageLoader filter to allow for PNG alpha transparency in IE? It's not a great solution, but... it's the only solution. Some people have an aversion to creating a seperate "IE Hacks" CSS doc and sniffing for browser, but I'm not even sure that's needed..." `myDiv { background: url(transImg.png) no-repeat; _background: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transImg.png') }` Are you using an image you created then, maybe the your image doesn't have the alpha channel saved quite right or something, I'm no expert there there are different bit types, not sure that matter's though.

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Apr 09, 2006 14:29 I'm almost sure it's not the image, because it was exported from photoshop and works in all the other browsers I have tested it in. So I'm not quite sure why my images don't even display. The sad thing is, it works wonderful in IE7, yet I still need to support IE 5.5/6. :( I have seen the ala article you linked to (good site), that's actually where I got the code snippet I was trying to use in ie.sucks.hax.use.freebsd.css. Do you think it's even worth fooling with? I'm going for something like <a href="http://codymays.net/~private_ftp/meh.png">this</a> with the design and the drop shadows make it look a whole lot nicer.

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Apr 09, 2006 15:17 `Screen.css html>body #El { background-image: url(./pix/bg.png'); /* etc. .../} ie_win.css html #El { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='./pix/bg.png'); background-image: none; / background-repeat: repeat; / / background-repeat: no-repeat; */ } [if lte IE 6] > <link rel="stylesheet" href="ie_win.css" type="text/css" media="screen, projection"> <![endif]--> <script></script> </head>`

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Apr 09, 2006 15:50 I've been doing several sites with a gradient running down the page like you've got there, and didn't really no about the alphaImageLoader really no idea what headaches it can be or what your problem is then. I was happy just getting my shadow gradient in the wrapper to stop with a light grey color, you might see a little halo up on the darker part of the page BG or the lighter depending what grey you go w/ but since it's all grey scale sort of it should be alright. You just need the png for the outer wrap on the container div, or more than that?

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Apr 09, 2006 16:19 `z-index:1000; position:absolute;`

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Sun Apr 09, 2006 16:40 TzMedia wrote: I've been doing several sites with a gradient running down the page like you've got there, and didn't really no about the alphaImageLoader really no idea what headaches it can be or what your problem is then. I was happy just getting my shadow gradient in the wrapper to stop with a light grey color, you might see a little halo up on the darker part of the page BG or the lighter depending what grey you go w/ but since it's all grey scale sort of it should be alright. You just need the png for the outer wrap on the container div, or more than that? I just need them for the outer wrap, so it needs to be tiled along the y-axis as the div grows in size.

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Mon Apr 10, 2006 16:02 Not transparent:

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Mon Apr 10, 2006 21:27 unremarkable wrote: Not transparent: I was referring to the drop shadows on the white area below the black header. I've made a new design of the site without drop shadows. I just decided to use a 1px grey stroke effect in photoshop, and it does what I need. So I'm happy with it. :)

Lost_User Joined: 22 Jun 2006 Posts: 0 Status: Offline	Posted: Mon Apr 10, 2006 22:28 Here are a few sites I've worked on which implement the alpha image loader: http://lentix.com/ http://stonecraftusa.com/

Page 1 of 1

Post new topic Reply to topic