Instant Background Color

ice78991 · Jul 11, 2007

I am working on a site which has a black background. When you load a page with a few images on it, the page loads with a white background ( screen stays blank ) then once the images are loaded the background color is changed to black. This results in a white flash for the user. Is there any way to get javascript to change the color of the background first before doing anything else. I've tried putting document.bgcolor='#000000' after the html tag but this has no effect.

BabyJeffy · Jul 11, 2007

You could put in an inline style on the body tag to deal with this:

Code:

<body [b]style="background-color:black;"[/b]>

You might want to move all javascript and css into include files (rather than have them in the document). This problem could also be related to the doctype you are using.

Just some ideas!

Cheers,
Jeff

[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

monksnake · Jul 11, 2007

I wouldn't rely on Javascript to do this change, if you do the body can't load up in the color you want, it has to load and THEN change it to the background color you want.

If you do want the background color to change after the page loads, you can use window.onload

Code:

<script type="text/javascript">
   function changeBackground() {
      document.getElementById("thisBody").style.backgroundColor = "#000000";   
   }
   window.onload = changeBackground;
</script>
<body id="thisBody">

or you can write the actual change AFTER the body tag is created.

Code:

<body id="thisBody">
...
...
</body>
</html>
<script type="text/javascript">
   document.getElementById("thisBody").style.backgroundColor = "#000000";   
</script>

<.

Olavxxx · Jul 11, 2007

I dont know what you use for layout, but if you rely on the oldschool table layouts, be aware that the tables are rendered from inside-out.

eg. the more nested they are, the more effect like this you might get, if you are styling the outer table/cell/row.

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

ice78991 · Jul 12, 2007

Thanks.

The inline style on the body tag solved it

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Instant Background Color

ice78991

Programmer

BabyJeffy

Programmer

monksnake

Programmer

Olavxxx

Programmer

ice78991

Programmer

Similar threads

Part and Inventory Search

Sponsor