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
  • 343 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Troy III

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.