View Full Version : Background img fade in

03-02-2012, 01:06 PM
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

03-02-2012, 04:23 PM
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.

03-02-2012, 04:43 PM
you can not fade in a background jmage

you can only fade suitable elements containing a background image

Philip M
03-02-2012, 04:44 PM
Have a look at


03-02-2012, 07:48 PM
Thank you!

03-02-2012, 07:48 PM

03-02-2012, 11:20 PM
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.

03-03-2012, 08:12 AM
Greatful for your effort!!