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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
rbudjConnect With a Mentor Commented:
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
 
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
 
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
All Courses

From novice to tech pro — start learning today.