I have a problem with my WRT widget. When open from the device, it is loaded with a white space/screen before enter the flash.swf

I have added a css like this : background: url(splash.png) no-repeat; but it doesn't work.

Where shall I put the splash image ? If can provide with sample code. I am newbie into javascript.

Does anyone experience this problem before ?

Below is my sample html code.

<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=360,user-scalable=no" />
<link rel="stylesheet" href="style/style.css" type="text/css"/>
<script tyce="text/javascript" src="script/default.js"></script>


<script type="text/javascript">
function setPortrait() {

if(widget.isrotationsupported) {

widget.setDisplayPortrait();

}
};

window.onresize = function() {
setPortrait();
}

</script>

</head>

<body onload="init();">



<div id="fullscreen">

<div style="margin:-1px; width:360px; height:640px">

<div class="flash">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="360" height="640" id="MyFlash" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="happyBirthday.swf" />
<param name="loop" value="true" />
<param name="menu" value="true" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="#ffffff" />
<embed src="happyBirthday.swf" loop="false" menu="false" quality="high" wmode="opaque" bgcolor="#ffffff" width="360" height="640" name="Finish" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflash"/>
</object>
</div>
</div>
</div>
</body>