How-to display a .gif as background image?

Posted by Vito De Tullio on Stack Overflow See other posts from Stack Overflow or by Vito De Tullio
Published on 2010-04-06T14:46:15Z Indexed on 2010/04/06 14:53 UTC
Read the original article Hit count: 301

Filed under:
|
|
|
|

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html