How-to display a .gif as background image?
- by Vito De Tullio
Hi!
I have a javascript "loading" function like this:
function splashScreen() {
var div = document.createElement('div');
div.appendChild(document.createTextNode("some text"));
div.setAttribute("style",
"position: fixed; " +
"width: 100%; height: 100%; " +
"left: 0; top: 0; " +
"z-index: 1000; " +
"background: #fff url('img/loading.gif') no-repeat center; " +
"font-size: x-large; " +
"text-align: center; " +
"line-height: 3em; " +
"opacity: 0.75; " +
"filter: alpha(opacity=75); ");
document.getElementsByTagName('body')[0].appendChild(div);
return true;
}
I use this function in the form action (onsubmit="return splashScreen()") to show a "rotating logo" while the next page load...
The problem is in that "img/loading.gif" and safari (on winXP): in ff and ie I have no problems, and I clearly see the animated gif. In safari I can't see it.
If I change the image with a (obviously static) png the image appears...
Am I doing something wrong? What's the problem with safari?
