css png background possible?

[LiLcRaZyFuZzY]

hi,
is it possible to have a background png image in css?
cuz im trying sumthing w/ a jpg, working no problem, now this ugly background is pissin' me off, so i want to make it a png...but nothing appears.

background: url('blahblahbl.png') no-repeat bottom left;


:confused:

[Fang]

Should be no problem, check the path.
Not all elements show background-image

[LiLcRaZyFuZzY]

yeah i know, but its a div....
but i think its the path...as the css is in its own folder...oh! my bad...sorry. :o

thx fang
ima try that later

[Stephen Philbin]

Don't forget everybodys favourite retard can't really handle png's.

[DaveSW]

only if you use alpha transparency. other than that it's fine with them.

Although come to mention it I've noticed slight colour variations in png files between moz and ie.

[LiLcRaZyFuZzY]

well, png is supposed to be loseless...so it should be either the browser or the screen.
it got that problem with jpg, when i try to fade from a graphic to a background color....it usually doesnt work...slight color difference

[DaveSW]

yeah what I have is I save a png in PSP, when I open it in IE and screenshot it it's a slightly different color to when I open it in Moz and screenshot it. Not a visible difference, but the hex numbers are slightly different. So it's the browsers rendering the colors differently, and if you put them side by side then you start to see the edges.

[Stephen Philbin]

The alpha transparency (to me) is the best thing about png's though.

Forum you can't really get a better example than forum smileys. You have to have either ugly jaggied edges on them, or you can have nice smooth looking ones, but the background of the forum can never change. With png's you can have the best of both worlds. Take my crappy doot logo from my server as another example. Nice n' smooth edges on it and I can do what I like with the background without having to change the image. Swipe that image from my server and change it to a gif. You can instantly see extremely ugly jaggied edges on it. You could save it as a jpg psd/xcf combo, but you'd have to change the psd then resave as a jpg and re upload every time you alter the bg in any way. I almost never use jpg's any more and never use gif's at all (on personal work). There's just no point any more. But when it comes to production work, you once again have to lower the bar and make compromises because of "that damned thing". Thanks to the alpha opacity png's are just way better. It lets you do so much more with so much less effort. It's just a shame we can't use their benefits.

[LiLcRaZyFuZzY]

but i still dont understand why microsoft claim that IE has full png support...and why they dont actually do it, like Moz & NN...it would be so much easier...

[DaveSW]

alpha transparency is an optional part of the png specification, so technically they can claim full png support. :(

[LiLcRaZyFuZzY]

MS people are tricksters!:mad:

[DaveSW]

Quite a useful blog entry by one of the people working on IE:
http://blogs.msdn.com/dmassy/archive/2004/08/05/209428.aspx

[tonyh]

Okay, so what is the best option for full PNG transparency support while using CSS?

Hopefully one that doesn't show a gray outline or complete gray backgrond during load time....

[LiLcRaZyFuZzY]

well, for IE u can either use the microsoft alpha filter(but images wont appear in non-IE browser) or use the blog entry which url Dave posted.
i didnt try the latter, but it seems to be the best solution.

[tonyh]

Originally posted by LiLcRaZyFuZzY
use the blog entry which url Dave posted.
i didnt try the latter, but it seems to be the best solution.
And which blog entry are you refering too? There is a number of links to proposed solutions in that blog, which is the best?

For those that use PHP I found an article for IE5.5+ here (http://www.koivi.com/ie-png-transparency/).

I've used bobosola (http://homepage.ntlworld.com/bobosola/pnghowto.htm)'s in the past, but it has the ugly gray backgrounds until after loading is completed. And again it only works for IE5.5+.

There is also alistapart (http://www.alistapart.com/articles/pngopacity/)'s article.

So the 're-worded' question is:

What is the best solution that allows full PNG transparency for image and backgrounds for IE4+ (the blog states IE4 supports PNG), is cross-browser compatible, and avoids the gray backgrounds?

Edit: I also found this solution (http://sam-i-am.com/work/sandbox/samstests/shadowed_box/shadowedBox_htc.html) which uses CSS and an .htc file. Be warned that the behaviour uses 8 alerts to show progression. His example also shows gaps in between elements, this is all explained on the site without a solution yet. Be aware that there is an issue with .htc's and mime-types (http://www.hoeben.net/node/view/33) in IE SP2.

[Triumph]

Will this help?

http://www.skyzyx.com/scripts/sleight.php

[DaveSW]

Download the trial version of psp from www.jasc.com . Then use the png export for web feature. their basic transparency option works in ie5 upwards without any hacks. In IE4 I think it displays the original background color, so make it something fairly blendable and it should be fine.

[amazing_andr3]

I almost never use jpg's any more and never use gif's at all (on personal work).

what do you mean you almost never use jpgs? jpg photos can be up to ten times smaller

[LiLcRaZyFuZzY]

well...i think he was talking about web graphics

[Triumph]

Originally posted by DaveSW
Download the trial version of psp from www.jasc.com . Then use the png export for web feature. their basic transparency option works in ie5 upwards without any hacks. In IE4 I think it displays the original background color, so make it something fairly blendable and it should be fine. Do you have a sample? I'd like to see it in action. :)

[DaveSW]

test my logo on http://www.emdevelopments.co.uk/

The file itself is http://www.emdevelopments.co.uk/graphics/toplogo2.png

If you view the file alone it should look fairly good on a plain white background.

[tonyh]

I don't suppose you would know why Jasc's implementation of PNG would vary from Adobe or Microsoft's? I thought a file format is a file format no matter what program is used.

Or is it a particular setting when exporting for web?

[DaveSW]

I don't really know, but Jasc offers two options. 1 is single color transparency. 2 is alpha channel transparency. It's the single color that works.

[Triumph]

Originally posted by DaveSW
I don't really know, but Jasc offers two options. 1 is single color transparency. 2 is alpha channel transparency. It's the single color that works. Ah, I see. Alpha channel is the beauty of PNG. http://members.verizon.net/vze47msr/triumph.png

[LiLcRaZyFuZzY]

hmm...dyou know if png alpha transparency support is planned for future IE versions? and why they didnt implement it?did they forget it?

[Triumph]

Originally posted by LiLcRaZyFuZzY
...and why they didnt implement it?did they forget it? IE does support alpha channel in png but it is turned off by default. M$ wants to push their own proprietary format and claim it is "standard". Something like that. :)

[LiLcRaZyFuZzY]

dirty bastards!:p :o

[MstrBob]

Originally posted by Triumph
IE does support alpha channel in png but it is turned off by default. M$ wants to push their own proprietary format and claim it is "standard". Something like that. :)

IE does support it? How, pray tell, can one turn it on?

IE doesn't support PNG alpha transparency, because alpha transparency is an optional part of the PNG specification. And you know IE, simply getting any part of any specification is an accomplishment for them. Forget about optional stuff (unless its something they made up).

[Triumph]

Originally posted by MstrBob
IE does support it? How, pray tell, can one turn it on? IE doesn't support PNG alpha transparency, because alpha transparency is an optional part of the PNG specification. They look good to me: http://members.verizon.net/vze47msr/proof.html

:) (5.5 and up)

Please forgive the slop. It was a quickie thrown together. :o

Ooh, resizing the page around the images is fun. ;) LOL

[tonyh]

Originally posted by Triumph
They look good to me: http://members.verizon.net/vze47msr/proof.html

:) (5.5 and up)

Please forgive the slop. It was a quickie thrown together. :o

Ooh, resizing the page around the images is fun. ;) LOL
It loads much quicker than the solution I've been using; however, there is still a quick flash of gray around the images before the transparency renders. And it doesn't cache, I reopened the link several times and got the same gray flash. It's quite disoreinting. And could be quite a hassle in a page disigned with CSS rather than frames. Everytime a page would load you's still see the flash.

I could of sworn that someone had posted a solution using php. If someone has a server side solution (preferably php) that would be awesome as well.

[Triumph]

Originally posted by tonyh
It loads much quicker than the solution I've been using; however, there is still a quick flash of gray around the images before the transparency renders. And it doesn't cache, I reopened the link several times and got the same gray flash. It's quite disoreinting. And could be quite a hassle in a page disigned with CSS rather than frames. Everytime a page would load you's still see the flash. I didn't notice the flash...I'll have to check into that. Side note: there are no frames in that link above. :)

[Triumph]

hmmm...I don't get the flash of gray. I am using IE6/Windows to test it. What are you using?

[tonyh]

Originally posted by Triumph
hmmm...I don't get the flash of gray. I am using IE6/Windows to test it. What are you using?
Windows XP Professional 2002 SP1, IE 6.02. And yes I still see the flash or "flicker" of gray around the image on page load. If there was away for the JavaScript to load prior to displaying the text and images it would wotk great. Unfortunately "onLoad" occurs simultaneously with the browser.

Here is a link to a PHP solution www.koivi.com (http://www.koivi.com/ie-png-transparency/). However, as I am new to PHP I don't really understand his steps 2 and 3.

[Triumph]

Originally posted by tonyh
Here is a link to a PHP solution www.koivi.com (http://www.koivi.com/ie-png-transparency/). However, as I am new to PHP I don't really understand his steps 2 and 3. Ooh, thanks for the link. :)

I'm going to have to give it a try just in case someone is looking with javascript turned off. :)

[Triumph]

Originally posted by tonyh
Windows XP Professional 2002 SP1, IE 6.02. And yes I still see the flash or "flicker" of gray around the image on page load. I am guessing here but perhaps it could be a difference in our video cards rendering the images...again, that is just a wild guess.

[Triumph]

Originally posted by Triumph
Ooh, thanks for the link. :)

I'm going to have to give it a try just in case someone is looking with javascript turned off. :) Bah, I couldn't make it work. It could be my server though.

[tonyh]

Originally posted by Triumph
I am guessing here but perhaps it could be a difference in our video cards rendering the images...again, that is just a wild guess.
AMD Athlon 2400+, 1 GB DDR ram, Asus GeForce2 GTS 64MB DDR

It maybe that my computer is actually loading the images faster than the JavaScript can process them. Or maybe I've just got really good eyes ;) .

I will be experimenting with the link above in a while as well. Reading through the article it seems his PHP solution parses out all PNG extensions and replaces them with a proper HTML solution. If that HTML solution is the same as Sleights, then we may see the same result. Just the HTML is processed before load rather than during.

I just want to get rid of that darn gray background * sigh *.

Here is another PHP solution (http://webdev.it-werx.org/modules.php?op=modload&name=News&file=article&sid=6), if you want to give it a shot. My hostserver's are using PHP 4.3, will either of these solutions work?

[DaveSW]

both should work on your server.

[Triumph]

Originally posted by tonyh
My hostserver's are using PHP 4.3, will either of these solutions work? My host is using 4.3.10 and the first solution had no effect so I will give your second link a shot. :) Thanks for the links.

[Triumph]

No dice on the second one either. It has no effect. Oh, well. I'll stick with jpgs or sleight. :)

[tonyh]

Originally posted by Triumph
No dice on the second one either. It has no effect. Oh, well. I'll stick with jpgs or sleight. :)
That's too bad. When I finally get around to experimenting with PHP and if I'm able to get it to work I'll let you know how.

The problem with sleight and a few of the other solutions provided here are that they all require JS. Out of 95% of internet users out there, about 13% have JS disabled, you can do the math on how many will see a gray covered screen :p .

Quick question, is there a petition for this? I'm not concerned about having them implement full PNG transparency in IE6, but what about 6.5 or 7 that will appear in Longhorn?

[Dathor Verlox]

couldnt you all use conditional comments as shown below to load a different image for IE using a seperate css stylesheet to remove the png's (display: none; maybe on a specific class like img.png) then using more conditional comments put in new images that only the worlds fave browser will see.

<!--[if IE]>
CODE
<![endif]-->

<!--[if IE]>
<style>
@import url("stylesheetname.css");
</style>
<![endif]-->

<!--[if IE]>
<img src="images/imagename.gif/jpg/alternative">
<![endif]-->

Just my thoughts on the matter

[Triumph]

Originally posted by tonyh
Quick question, is there a petition for this? I'm not concerned about having them implement full PNG transparency in IE6, but what about 6.5 or 7 that will appear in Longhorn? There's a petition for anything if you look hard enough. ;)

Keep me posted on your php experiments.

[Triumph]

Originally posted by Dathor Verlox
couldnt you all use conditional comments as shown below to load a different image for IE using a seperate css stylesheet to remove the png's It's not ideal...but neither is any of the other "solutions" we've posted.

Ideal would be for Microsoft to wake up.

[Dathor Verlox]

Ideal is for micro$oft to go back to their hole and let decent software take its rightful place. I mean, firefox is free, IE is free, opera is free etc. Why do micro$oft bother trying to make free software which they get no money for instead of just using firefox and spending more resources on improving the stuff they do get money for (like windows etc).

The world only needs one browser - whichever is best for most people. Ok so lynx is useful for people who dont want images so there are some niche markets to be fulfilled but most people would be fine with firefox. Fewer browsers = less time wasted developing for people with software which isnt up to scratch.

The same applies for loads of things if you think about it.

[Triumph]

Originally posted by Dathor Verlox
The world only needs one browser The world only needs one car...the world only needs one size of house...the world only needs one meal...well, you get the point (I hope).

I'm not one for suppressing individuality. If there were only one browser in the world then it would never improve. Competition drives innovation. Also deserving mention is having a heart for the disabled that can not use that one world browser.

The problem is NOT with there being more than one browser the problem is with the browsers not being fully compliant to standards.


Originally posted by Dathor Verlox
[B]whichever is best for most people."Most" leaves out the "some" or the "others". The "some" are an important market share to the commercial site and an important member to the hobby site. Who doesn't want more people looking at their site?

[Triumph]

Originally posted by Dathor Verlox
Fewer browsers = less time wasted developing for people with software which isnt up to scratch. Developing with web standards = less wasted time developing...then browser differences don't enter into it.
Originally posted by Dathor Verlox
The same applies for loads of things if you think about it. The only thing that benefits from monopoly is the monopolizer. (Is monopolizer a word??? ;) )

[DaveSW]

monopolist perhaps? :)

[Triumph]

Originally posted by DaveSW
monopolist perhaps? :) :D Yes.

Actually both show up in the dictionary. I just looked. LOL!

[Dathor Verlox]

i did specifically say that there would need to be other browsers to fill the gaps (i mentioned lynx-the text only browser). People who cannot use the single browser will be served by one of the more specific browsers. Also the single browser will cater for most and the rest will be catered for by the niche browsers or the single browser with plugins written specifically. The world doesn;t need to spend more than one team of software developers making the same product to different degrees of success, let the people who are best at building browsers build browsers and let the rest devote their time to other things.

Also the world does only need one car - provided it is skinable. Everyone has different tastes but with browsers you can have one browser that gets skinned.
you are right in saying that competition drives innovation butin business, being the best often means a financial reward. With browsers, improvement is just as easily driven by the standards being updated, by bugs in the original being fixed or by someone writing an improvement because they desire the added functionality.

[Triumph]

Originally posted by Dathor Verlox
Also the world does only need one car - provided it is skinable. 1,000,000,000 NASCAR fans disagree. LOL. ;)
NASCAR is auto racing to those outside of the USA.

[Dathor Verlox]

hang about? one sixth of the worlds population are NASCAR fans? and you only need one car - the perfect car which has plugins and skins to change its appearance and add specific features

[Dathor Verlox]

and depending on the monopoly multiple people can benefit, one group works on a browser. this frees up other people to work on a download client etc. Provided the browser has a plugin system to allow people to add features that have been developed by individuals seperate to the browser builders.

The monopolyonly exclusively benefits the monopolizerists when there is a profit involved. If the one browser was free there would be no benefit to being the monopolizerist.

[Triumph]

No, no. I'm sorry. Only one MEMBER™ is now needed on this board, no more posts or opinions and certainly no helping. We have a HELPER™.

...and what's this? Your COMPUTER™ is not the approved brand. We're sorry, you must turn that in.

From now on there will be no web developing we have a DEVELOPER™. What's the point anyway they are all the same. We have a WEBSITE™. It is the same for everyone.

You will be issued your TEXT BOOK™ explaining all this. It is called 1984.


LOL! :D

[tonyh]

Well, now that we've gone *way* off topic....

Having standards have always been a concern for me. Not that I'm all together concerned about individualism, it's the fact that there will be little difference on each implementation.

When it comes to technologies, especially web design/development, I believe that less variance is good. However, if every browser was W3C compliant, implementing the exact same box model, ect, what would be the point of multiple browsers? Especially if they are free? For example, I find little, if any, difference between Firefox 0.8 and Netscape 7.1. Why would someone choose one over the other?

And that is the question. The answer is proprietary. The most feared word on the board, next to tables... :p .

Or as mentioned earlier, plugins. It's the features that one browser offers that makes it different from the other and thus better in the eye of the user. There isn't anything wrong with IE proprietary features, it's the fact that IE doesn't offer the remaining standards to go with them. Or fully supported features of file formats such as PNG.

How many of these exclusive features of IE and NS over the years have actually become W3C standards? More than you would think. And that's how progress is created, if something becomes popular enough, or in demand, then it makes sense for the W3C to request (as really that's all what the standards are) that those same features be applied across the board. An example of this is rounded corners and text shadows currently offered in CSS3.

Once we get all the browser vendors to apply the standards as a first priority, then we can see what neat and cool features the vendors can come up with. And if the vendor is lucky they will see their ideas applied to the next standard in a year or twos time.

The next feature, other than design, which will determine which browser is better than the next is security. If NS and Mozilla hadn't included a pop-up blocker in their browsers I can almost guarantee that Microsoft wouldn't have done the same for IE6 SP2. As long as the vendors keep pushing security and the remaining realize that they are inadequate then progress will be made there as well.

As a side note I just downloaded the latest Windows Update, not SP2 yet, but soon, which included a Spyware Removal tool. I don't know it's quality, but atleast it's being offered for free, just as Microsoft offered it's firewall and the pop-up blocker as well. I personally feel that vendors such as Norton and McAfee are taking advantage of the average consumer when it comes to internet security. Why develop a second software package for the removal of spyware when the same features should have been applied to their anti-virus software to begin with. I mean their anti-virus scans can find *some* spyware, why not all? The answer is money.

AOL has included a pop-up blocker, spyware removal and anti-virus for quite some time, why can't other browsers do the same? Wouldn't it be neat if the browser itself actively scan pages to prevent spyware and viruses from being downloaded? Why should we wait until after the computer is already infected before we can protect the computer? We can argue that's the roll of a firewall, but firewalls don't prevent spyware and viruses, they just block ports, they don't scan content, atleast if they do it's not very comprehensive.

Why did I go on about these? Because firewalls, active scanning, ect can become features for browsers in addition to design and display. Thus third-party software wouldn't be required anymore, or atleast not as necessary. (If viruses and spyware couldn't be downloaded, what would be the point of having to scan the computer?) Just something that could give one browser an advantage over the next. Even if it was paid for, I would pay $49.95 for IE 7 as a seperate install if it inlcuded all the features I've discussed here. After all it could save me hundreds of dollars in third-party software.

Of course the main advantage of having multiple browsers: exploitation. If there was only one browser and it's security faults were known, well we already know what happens with IE....

Now back to PNG transparency support in IE :D .

[Triumph]

Originally posted by tonyh
Well, now that we've gone *way* off topic....Now back to PNG transparency support in IE :D . Agreed! :)

[amazing_andr3]

It is my uderstanding that viruses like sasser do not come through webpages and therefore security feature in the operating system (windows) should be used to protect against it, rather han security features in the browser.

But in any case, this would be an interesting idea. Have you thought about suggesting it on the firefox wishlist? I want to suggest an option to turn off the "target" attribute, I just haven't found the time to do that yet.

Also, firefox is quite new, people haven't had the time to make that many extensions. I myself searched for a basic extension to check my spelling in forms like this and could not find it. Perhaps you will soon see an anti-spy extension.

[tonyh]

Originally posted by amazing_andr3
It is my uderstanding that viruses like sasser do not come through webpages and therefore security feature in the operating system (windows) should be used to protect against it, rather han security features in the browser.
What I'm suggesting is both. Have limited scope of a firewall, meaning simple port blocking, similar to the standard pop-up blocker, allowing the user to choice which ports are active when default is off in the browser. In addition to which websites can actually upload content to the computer via ports 80, ect. If AOL can offer virus protection through it's browser, so can IE, Mozilla and Opera.

The problem we're facing with viruses these days are distribution, prior to the spyware explosion on the internet viruses were primarily spread via email. Now that can be distributed with spyware, which is content oriented. As long as the browser is able to scan the content of the page, it should help prevent spyware, thus viruses, from being uploaded (or downloaded by the user as it were.)

And yes I believe that all the current, and hopefully new, security softwares should be available with the operating system and not as a third party option. I believe that the OS vednor should be working closely with third party vendors in order to improve the operating system security, and not rely on third-party development alone.

But in any case, this would be an interesting idea. Have you thought about suggesting it on the firefox wishlist?
Didn't know one existed.

Also, firefox is quite new, people haven't had the time to make that many extensions.
I don't believe extensibility is the answer. The problem with plugins and additional downloadable features is that the onus is on the user to download them. The average user isn't going to be aware of such things. I have to agree with Microsoft on their implementation of SP2, make everything default on, thus the user can choose to turn things off. In other words I believe that these additional features discussed above, and now here, should be part of the core and not a seperate install.

I've said my piece. Let's get back to PNG, please?

[tonyh]

Back on subject ;) .

Unfortunately this is another question and not a solution.

I'm currently working on a site redesign, where I plan on have a repeating background (faux columns). Now normally I would build the background into my foreground images when it requires layers. However, since this is repeating and is based on content length, I will be required to use z-index and layer multiple divs.

Of course PNG is ideal, and perhaps meant, for this. But, I don't believe that Jasc's PNG exporter will cut it and neither will GIFs. So am I stuck having to use sleight or a server-side solution?

Otherwise, the grey left by IE will literally cover the entire repeating background. Any suggestions?

Edit: I'm currently testing sleightbg for background PNG's and it doesn't work. Rather than repeating the image (currently solid red with a single transparent line for break) the image is stretched the entire length of the div and all repeated transparency is placed at the bottom. And I'm gettings some odd transparency in Firefox backgrounds as well. In Firefox the transparency seems to fade from the left and right to a partial transparency in the center.

Anyone else find a solution for this thread's subject line?

[DaveSW]

it might be better if you started your own thread, showed us what layout you were trying to achieve and went from there. I have an idea you're better off setting the div width.

[IncaWarrior]

IE is the only browser that lets viruses through though, all the others don't have those security holes.

[tonyh]

Originally posted by DaveSW
it might be better if you started your own thread,
That may be a good idea, would it be best to put it here or in Graphics considering it's PNG related, mind you it's could be JavaScript and PHP too...

showed us what layout you were trying to achieve and went from there.
The layout is complicated and still under development. I suppose I could put up the test sites, which atleast shows the problem I'm having.

I have an idea you're better off setting the div width.
I already am. It's the length which requires the repeating PNGs as backgrounds. And having a set width is causing problems with Gecko as well, specifically padding and borders. I know it's their box model, where padding is added to the existing height and width, unlike IE which includes it. Probably the only really good thing I like about IE...

Edit: I determined why the PHP solutions posted by me on this thread aren't working, atleast in my case, not sure about others though. The PHP solutions only parse inline CSS background attributes. Thus, all attempts at external CSS fails. Also, for those trying to implement Koivi's make sure you have the proper path for the PHP files in the 'include_once'. Note: I haven't actually tested this yet, this is just further readings into his article.

I also found something else odd. When I removed sleightbg from my test file I discovered that IE displayed the background image the same as Gecko. That is transparent on the left and right edges, but a gradual degradation to partial tranparency in the center. I have yet to determine if this is because of PNG-8, which supposely IE does support, or PNG-24. Either way part of the background color does appear in IE, rather than just grey, I just don't understand why Gecko is doing this as well.

Edit2: I just found out that the IE AlphaFilter hack doesn't allow repeating when applied to CSS background. Which more or less defeats the purpose of Faux Columns :mad: .