bb187
03-14-2008, 03:15 PM
Hi folks, new to the forums, having a problem that I've never encountered (mostly because I shy away from using transparency in the first place). A client gave me a website that was based on a template. Basically, #sitename is a div at the top of the page and i placed a transparent.png as a logo in the top. displays fine in firefox, in ie it has a solid color where the transparency should be. I researched and found a hack, which you can see in my code:
#sitename{
background:url(img/headernew.png) top center no-repeat;
font-weight:400;
height:130px;
margin:0 20px 10px 0;
text-align:center;
*background:none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/headernew.png',sizingMethod=scale);
}
however, it stretches the image and makes it all mis-sized. Is there any way to achieve transparency in a div without this hack?
Edit: I've also tried changing sizingMethod=scale to none and that just uncentered the image, but didnt warp it. I also tried setting div opacity but that just kept the background where the transparecy was supposed to be and made the whole image transparent rather than just the parts that were supposed to be.
#sitename{
background:url(img/headernew.png) top center no-repeat;
font-weight:400;
height:130px;
margin:0 20px 10px 0;
text-align:center;
*background:none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/headernew.png',sizingMethod=scale);
}
however, it stretches the image and makes it all mis-sized. Is there any way to achieve transparency in a div without this hack?
Edit: I've also tried changing sizingMethod=scale to none and that just uncentered the image, but didnt warp it. I also tried setting div opacity but that just kept the background where the transparecy was supposed to be and made the whole image transparent rather than just the parts that were supposed to be.