Background img fade in

A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded?

window.onload = function()
{var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)";
bodyTag.style.backgroundAttachment = "fixed";
bodyTag.style.backgroundPosition = "100% 100%";
bodyTag.style.backgroundRepeat = "no-repeat";}

Grateful for clues

Don't use window.onload for a css rule. Add your rule to the css section and make it invisible.

Use window.onload to call a javascript function to fade the image in.

you can not fade in a background jmage

you can only fade suitable elements containing a background image

Have a look at

http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation

Thank you!

Thanks!!

I'm very new to javascript and is trying to figure out how to modify the scripts in the link to a simple timer so after maybe 2 seconds (or even better, after the image have finished loading), the black screen would fade out revealing the image.

I have a random image being pulled from a php and it's set to z-index -1 so I think I should be able to apply this javascript to the whole background so that the images would load properly.

To be honest, I'm a little lost on how to modify the script for this purpose.

Greatful for your effort!!