Little HTML/CSS issue - PNG isn't transparent

CitizenSmif

CitizenSmif

New member
Jan 26, 2009
756
9
0
Scotland
I have a HTML/CSS layout. Within it I have an HTML table with 3 columns and 4 rows, on the 3rd column I have 4 (of the same) PNG images but once added they aren't transparent with whats behind it. I double checked I was saving the PNG with transparency enabled, tried PNG 8 + 24.

Haven't touched HTML in a while so I'm sure I'm just being a fucktard but any ideas? Is it because they are within a table?
 


Just a thought but are you viewing it in IE6 ? If so IE6 doesn't support transparent PNGs (you have to use an htc behavior hack, or javascript, etc).


Also when setting your background make sure you set transparent in HTML as well, for example

background-color: transparent;

Otherwise it may use the default , or inherited background under the image itself. If they only occur within tables, its a good chance its because the background color property is inherited from it's parent object.


Also you want to use 24bit png if you want the alpha-blending otherwise you get the ugliness of GIF.
 
No, FF and IE8.

Good point there, the table bg and CSS both were defined to have white background but unfortunately the background shows through other parts of the table. Its just 4 overlayed images that are white.

Thanks for the suggestions

EDIT: The background image is a jpg, this doesn't make a difference does it?
 
CitizenSmif said:
No, FF and IE8.

Good point there, the table bg and CSS both were defined to have white background but unfortunately the background shows through other parts of the table. Its just 4 overlayed images that are white.

Thanks for the suggestions

EDIT: The background image is a jpg, this doesn't make a difference does it?
Click to expand...

Well if the main background is a jpeg, then as long as every object leading up to the transparent png div/cell/etc is transparent, it should show thru to the jpeg. Do you by chance have an example page I could observe?
 
Damn, I knew I was being a fucktard. We should have just left it at PM'ing me :P

I have the original PSD, when toggling the background image I can see through it - after slicing it and going to Save for web and devices, what more must I do other than check transparency to make this work?
 
CitizenSmif said:
Damn, I knew I was being a fucktard. We should have just left it at PM'ing me :P

I have the original PSD, when toggling the background image I can see through it - after slicing it and going to Save for web and devices, what more must I do other than check transparency to make this work?
Click to expand...

Thus why I don't "Slice", I just take that image on it's own, make it show as transparent in photoshop (ie: the grey grid) then when I do save for web , I choose PNG 24, with transparency checkbox on, if you see white as the bg you didn't turn off the background layer before doing save for web.

When you "slice" and do a save for web with xhtml/images/etc for all the slices its going to slice it as it see's it in photoshop, meaning if there was a layer under it, its gona include that in the 'slice' , thus why I don't slice that way (my method is somewhat like this Elite Profit Slice Demo , note the source)
 
  • Like
Reactions: CitizenSmif
You must log in or register to reply here.
Top Bottom