asked on

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.

zkeown

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');

ASKER CERTIFIED SOLUTION

rbudj

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trifecta2k

ASKER

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.

lherrou

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:


Cheers,
LHerrou

trifecta2k

ASKER

rbudj, I made that solution work. I couldn't find a fix for bg images, so I just used a regular image. Thanks.