PNG Transparency as a background image

What I want to do is use a PNG as a background image.  My PNG has a transparent background, however I keep getting a grey box around the image in IE.  I found a fix that works if I use the <img> tag, but I need this PNG to be a background.  I tried .gif format and it works but it looks horrible, therefore gif is not an option.  
LVL 5
trifecta2kAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zkeownCommented:
I found this method... I dunno if it will work.  In your CSS definition for your body put:

background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.png', sizingMethod='fixed');
0
rbudjCommented:
My guess is that this problem only exists in IE6.  One solution is to make the background of your png the same color as the background of the page.  Here is probably the best solution: http://homepage.ntlworld.com/bobosola/index.htm
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
trifecta2kAuthor Commented:
zkeown, I tried that and it didn't work.  
rbudj, thats the method I'm using but that doesn't work with background images.
The one way I can make it work is to use the png in an <img> tag and then use CSS and div tags to place objects using absolute positioning.  Is that recommended?  I'm still pretty new to the whole div thing.  Thanks.  
0
lherrouCommented:
trifecta2k,

This is a known issue with IE versions 6x and less. V7 does support PNG transparency without special filters.

In your regular CSS, you might have something like this:
#top H1 {
  display: inline;
  height: 140px;
  width: 255px;
  margin-left: 10px;
  margin-top: 12px;
  background: transparent url('images/logo_background.png') no-repeat top left;
  float: left;
  }

Then, in the head of your page AFTER all the rest of the CSS, put this:
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#top H1 {
  display: inline;
  height: 140px;
  width: 255px;
  margin-left: 10px;
  margin-top: 12px;
  float: left;
  background-image: none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo_background.png');
 }
</style>
<![endif]-->


Cheers,
LHerrou
0
trifecta2kAuthor Commented:
rbudj, I made that solution work.  I couldn't find a fix for bg images, so I just used a regular image.  Thanks.  
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.