Member Avatar for OnIIcE

i bet alot of you may be sick of reading/having to explain about this - but how can i do it? ive read alot of websites with css based and js work arounds. but none of them seem to work!
one did, but it messed the image up (resized it) which wasnt much help.

so is there any good work arounds? im hopfully looking for one which will work with pngs used in css.

for exaple i have

#websites.ui-state-default {
	background:url(../img/websites-bar.png) 0 0 no-repeat;
}

and would like to see the transparancy when its displayed!

also, i got a feeling that ther may be a problem with this if you mess around with sizes and positioning of the image with in the css? is this true?

thanks for any help =)
(also, not to be cheeky - but please no "dont use ie use firefox. let ie6 die" etc! lol thanks!)

  • 3 Contributors
  • 4 Replies
  • 357 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Quick summary and where this thread left off: Internet Explorer 6 does not support PNG alpha channel transparency natively, so a 24-bit PNG used as a CSS background will look wrong in IE6 unless you apply a workaround. is right about the limitation, and that’s why people use filters or fallback formats for IE6. (christopher.org)

About the filter approach (what suggested): the Microsoft AlphaImageLoader filter can restore alpha transparency for IE6, but it has real tradeoffs you need to know about. The filter exposes a sizingMethod with three modes (crop, image, scale) that control whether the image is clipped, used at its own size, or stretched — pick the right mode or the image/container will be resized unexpectedly. The filter also does not behave like a true CSS background: it cannot reliably support background-repeat or background-position, it can delay rendering, and it can sometimes intercept clicks (making links unclickable). Use it only in an IE6-only stylesheet or conditional block and test thoroughly. (learn.microsoft.com)

Other practical options and when to use them: if your transparency is simple (on/off) export a PNG8 (binary transparency) and IE6 will handle that more gracefully; if you need background-position/repeat/hover support or many PNGs, use a well-tested JS/VML fix like DD_belatedPNG (it preserves positioning/repeat and hover behavior better than raw filters); or avoid CSS backgrounds for that element and instead place an absolutely-positioned <img> behind the content so all browsers render the same. ()

Quick implementation tips (safe to try, avoids repeating code from the thread):

<div class="png-wrap">
  <img src="img/websites-bar.png" alt="" class="png-bg" />
  <div class="inner-content">…</div>
</div>
.png-wrap { position: relative; }
.png-wrap img.png-bg { position: absolute; left:0; top:0; z-index:0; }
.png-wrap .inner-content { position: relative; z-index:1; }
a.fix-link { position: relative; zoom: 1; /* triggers hasLayout in IE6 */ }

Troubleshooting checklist: confirm correct image path, set explicit width/height where the fix guesses size, scope any JS/HTC fixes to only IE6 (conditional comments), and test in a real IE6 VM because behavior can differ. For the common click/overlay problems, try triggering hasLayout (position:relative plus zoom:1) before ripping out other fixes. (24ways.org)

Recommended Answers

All 4 Replies

Member Avatar for Troy III

lol
you have to many assumptions.
I'd like to know:
Since when are you able to resize the backgound images? 'Cause this is all news to me!

Last time I used png as a background image I did it this way:

#pngImage {
	background: #C01013 url('Image.png') center no-repeat;
	height: nnn px;
	width: nnn px;
	}

for browsers supporting alpha on images natively
and for IE 6 and lower that suppport filter properties:
This new style body after the closed one. <!--[if lte IE 6]> or simply: <!--[if IE]> 

<style type="text/css">
#pngImage {
	background-image: none;      
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader('Image.png'); 
	}
</style>

<![endif]--> Of course it was applied on a DIV element.

Member Avatar for w33n

IE 6 doesn't support transparent PNG's . You could use a gif if you want transparency. If you use any other file type, you need to make sure the background (the part you want transparent) is the same color/pattern as whatever you're placing it on, this way it will appear transparent.

Member Avatar for Troy III

IE 6 doesn't support transparent PNG's . You could use a gif if you want transparency. If you use any other file type, you need to make sure the background (the part you want transparent) is the same color/pattern as whatever you're placing it on, this way it will appear transparent.

#pngImage {
	background: #color url('Image.png') center no-repeat;
	height: nnn px;
	width: nnn px;
	}

In conjunction with:

<!--[if IE]> 
<style type="text/css">
#pngImage {
	background-image: none;      
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader('Image.png'); 
	}
</style>
<![endif]-->

Will give you a PNG transparency support in all generation 4.1 browsers.

Member Avatar for Troy III

and would like to see the transparancy when its displayed!

Well, did you see it? Because the solution i offered is my original solution and I don't like to see it being used without even saying "thanks" in return!

Regards.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.