Hi! I am currently designing a website and the <body> has a certain background image (defined in the css). What I would love to be able to do is to have this image fade out to another image (or other imageS), slowly and constantly fading in/out. I'd find it awesome if someone could help me out on this one. I have yet to master Javascript or Flash, I'm a bit ashamed to admit it! Thanks! S
Hi. I think that this tutorial will help you. Read it all. Your problem is at the bottom of the document http://brainerror.net/scripts/javascript/blendtrans/
Thanks! I've gone through it quickly but didn't find my answer. I'll go over it more thoroughly later. I am not sure that it explains how to do what I want though. But thanks for your help!
You can use the setTimeout function to change the background image CSS property of the body tag, like : document.getElementById('body-id').style.backgroundImage = 'youimage.jpg' It's just the concept, but I think you have the idea. Also you can use the setTimeout function to fade your image using the opacity style.
in the tutorial there is a title called Fading one image into another You want this to be done to your body tag background background. try replacing in that script div tag with body tag. I've never tested but i think it will work. good luck
Thanks for the tips guys. I ended doing something a little simpler, and it works great. See ya around Sam
Hi (Joe?), I would gladly share the solution to this operation if I had one. I ended up using an unrelated alternative that was more light-weight and easy to perform, and it seemed irrelevant to detail it here. Good luck and thanks again to the people who gave clues and tips. If somebody does know of an easy way to do this, it would still be cool to know about it! Thanks, S
yeah that would be a bloody good trick to see... actually, i think it may be possible - apply your background to a div that's assigned a low z-index, absolute positioning and a background (think of it as a reverse / back modal). then produce your content into another layer on top of it with a transparent background.... you can now reference the bottom layer by id and change the opacity. here is a little example i wrote for a proof of concept (I liked the idea): http://fragged.org/dev/changing-and-fading-body-background-image.php all it needs is a stack / array of background mages to apply as a property to the layer... wee! i am so fucking cool....
i don't think that there is a was to solve this in CSS and Javascript. The backGroundImage is static. You can disable it. But you can't fade it nativly to an other image...