0

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
5
Views
8 Years
Discussion Span
Last Post by Troy III
0

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.

0

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.

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.