[x]

deviantART

 
Sign up to post to the forums! <3

Transparent PNG's As Background Images

Categories Forums > Galleries > Designs
[x]  
Join Now | Buy deviantWEAR | Advertise Here
~twistedtechnolog:icontwistedtechnolog: Feb 1, 2004, 11:28:05 PM
I recently put together a quick little test to see if transparent PNG's would render correctly in various browsers when they were used as a background image. I was shocked that all of the modern browsers I tested with supported the transparencies except for Internet Explorer (I wasn't shocked that it didn't work in Internet Explorer, I was shocked that it did work in everything else). The latest version of IE on both Mac OS X (5.2.x so it wasn't a surprise) and Windows XP rendered them like they were gif's with the transparency fading to white instead of transparent. I was using CSS for both the main page background (no transparencies of course), which was a tiling pattern, and for the content background, which was just a simple white fill at 50% opacity with a black outline and a drop shadow. It passed the test in the following browsers:

Camino 0.7 - Mac OS X
iCab 2.9.7 - Mac OS X
Mozilla 1.6b - Mac OS X
Mozilla Firebird 0.7 - Mac OS X
Netscape 7.1 - Mac OS X
Netscape 7.1 - Windows XP
OmniWeb 4.5 - Mac OS X
Opera 6.03 - Mac OS X
Opera 7.23 - Windows XP
Safari 1.0.1 - Mac OS X

But it failed in these:

Internet Explorer 5.2.2 - Mac OS X
Internet Explorer 6.0.2 - Windows XP

So anyway there are a few very savvy people here who might know of a way to get this to work correctly in IE (at least in IE6) since I was wanting to use this effect in a web site with user changeable or randomly selected backgrounds but I am not willing to cut out the most used browser on the planet. Now then for the fun part, it must be a client side solution, it can't use flash, and it must validate as XHTML-Traditional. So does anyone know of a solution?

Devious Comments

love 0 0 joy 0 0 wow 0 0 mad 0 0 sad 0 0 fear 0 0 neutral 0 0

~Androhazard:iconAndrohazard: Feb 2, 2004, 1:39:31 AM
yep, i know the way. you have to create a 1 px transparent git on a layer below transparent .png, but that's for images, dunno for background tho...

--
My mind is glowing...
~twistedtechnolog:icontwistedtechnolog: Feb 3, 2004, 11:46:23 AM
Guess I will have to figure out layers and give that a try to see then.
~Androhazard:iconAndrohazard: Feb 3, 2004, 12:00:25 PM
oops, i meant 1 px transprent .GIF :lol:

--
My mind is glowing...
~twistedtechnolog:icontwistedtechnolog: Feb 3, 2004, 8:49:46 PM
hehe

I am so used to reading over typos that I didn't even notice until you pointed it out ;)
~ABeautifulTragedy:iconABeautifulTragedy: Feb 4, 2004, 3:25:29 AM
hmmm, im not sure exactly what you are refering to, but i've tested some PNG's on most broweser, including IE 5.2.2 and its worked entirely. I've used them as backgrounds in tables, and the transparency was fully supported. However, im not sure about the main page background, im slightly confused on how that would work.

--
Devin Taylor
Thinking Allowed Graphics
---------
We're All Sick.....Life Is A Beautiful Tragedy
~twistedtechnolog:icontwistedtechnolog: Feb 4, 2004, 10:06:06 PM
No I am using them as a table background with CSS but I also tried it with them set as the table background and it had the same results (but of course doesn't verify as XHTML-Traditional). There is a main background which is a jpeg (also set in CSS but also tested as set in the body tag with no change in the outcome) and then there is the background used for the tables which is the transparent png. I have posted screenshot of this in my gallery so you can see how it renders. The top one is Safari 1.1 and the lower one is Internet Explorer 5.2.2 both running in Mac OS X 10.2.8. The screen shots will hopefully be here once DA quits being a pain.

Note: this is not a production web site it is just a test but both the XHTML and CSS are valid according to the w3c.org valuators. The top and bottom images work properly because they are just png image's using the img tag instead of the CSS background-image element.
~ABeautifulTragedy:iconABeautifulTragedy: Feb 5, 2004, 12:36:29 AM
hmmmm, well i see what's going on with your picture. I will admit i dont know either XHTML or CSS, and im guessing this is were the problem is occurring????

I ran a test just a moment ago with dreamweaver, just plain old HTML using a jpg background and a 40% opaque PNG for a table background. I tested it in IE 5.2.2 on Mac OS 10.3.2 and it worked exactly as should.

Like i said I'm not sure if you stating that the problem only exists for XTHML and CSS, but with normal HTML is seems to be supported just fine.

--
Devin Taylor
Thinking Allowed Graphics
---------
We're All Sick.....Life Is A Beautiful Tragedy
~twistedtechnolog:icontwistedtechnolog: Feb 5, 2004, 2:20:07 PM
Still doesn't work for me even with all the XHTML and CSS stuff removed. I have been stating that it has the problem no matter which way I do it.
~ABeautifulTragedy:iconABeautifulTragedy: Feb 5, 2004, 3:38:12 PM
Well, i'll be damned... I swear i had it working last night, but i redid it today so i could post a link up. and well what do yah know, it did just like you said.... I don't know what i was doing last night that made me think it worked, but i swear it did..... Well i guess i've been humbled, and i will crawl back into my hole admitting i was wrong.

--
Devin Taylor
Thinking Allowed Graphics
---------
We're All Sick.....Life Is A Beautiful Tragedy
Previous Page    12    Next Page
Sign up to reply to this thread! <3

Site Map

©2009 deviantART. All rights reserved
About Us | Contact Us | Help & FAQ Advertise | Services Etiquette | Privacy Policy | Terms of Service | Copyright Policy