Transparent icons vs jpg backgrounds

[Jaimee]

I am adding some new transparent png icons to my iPod touch. The problem is, the transparent portion of the icons shows up as gray. I am using a script that is often used here, so I know the problem isn't the icon itself. However, other pre-made transparent icons display correctly. What I am wondering is this: is the fact that my background image is a jpg file causing the problem?

[eatjello]

is this what you're trying to do? if so there's an alternative to making icons for every app.

[Jaimee]

Thanks for your reply, eatjello.

I'm not sure what you were trying to show me, but if you attached a file to your reply it didn't work or the server hasn't updated to show the attached files.

In any case, I'm running an HTML background using the Time Weather Calendar Theme and I'm thinking that the CSS coding for the background color may be causing some problems with my transparent png icon that I've placed above it. The icon's background is not transparent. (see attached image) I am also running the Categories ap and when I place the icon in one of it's folders, it shows up just fine - transparent, as it should be.

Unfortunately, I know little about css, so don't know how to remove the coding determining the background color of the jpg file it uses for the background image. Below is that css code.

If you have any suggestions on what is causing the transparent icon to be non-transparent in Springboard, or if you know how to modify the css script below to eliminate the background color all together, your assistance would be greatly appreciated.

Code follows:

<!-- change background script-->
<script language="JavaScript">

day=new Date() //..get the date
x=day.getHours() //..get the hour

if(x>=0 && x<6) {
document.write('<style type="text/css">body{background: white url(night.jpg); color: black}</style>')
} else

if(x>=6 && x<9) {
document.write('<style type="text/css">body{background: white url(sunrise.jpg); color: black}</style>')
} else

if(x>=9 && x<11) {
document.write('<style type="text/css">body{background: white url(morning.jpg); color: black}</style>')
} else

if(x>=11 && x<15) {
document.write('<style type="text/css">body{background: white url(day.jpg); color: black}</style>')
} else

if(x>=13 && x<18) {
document.write('<style type="text/css">body{background: white url(afternoon.jpg); color: black}</style>')
} else

if(x>=18 && x<20) {
document.write('<style type="text/css">body{background: white url(sunset.jpg); color: black}</style>')
} else

if (x>=20 && x<24) {
document.write('<style type="text/css">body{background: white url(night.jpg); color: black}</style>')
}
</script>

[eatjello]

you're trying to do this, yes?

[Jaimee]

No, not quite what I'm looking to do, but similar. The icons I am using are only partially transparent, not wholly transparent. Only portions of my icons are invisible, well SUPPOSED to be invisible, anyway? See my previous post for a screeny.

[eatjello]

i'm not sure if this will work, but try this

where it says

if (x>=20 && x<24) {
document.write('<style type="text/css">body{background: white url(night.jpg); color: black}</style>')

change it to

if (x>=20 && x<24) {
document.write('<style type="text/css">body{background: url(night.jpg); color: }</style>')
}

so just delete the colors that the template wants to force. try it for all those lines
}

[rhmjr]

I've been searching for an easy method to hide icon images and leave just the text labe showing (as you have done) - What is method you used?

thanks