How to fade background images

Advertising - Free Advertising - Kamala Harris - Home Improvement Articles Directory - Bet365 bonus

View Full Version : How to fade background images

sam79

Jul 2nd 2008, 11:03 am

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

catapop

Jul 3rd 2008, 11:54 pm

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/

sam79

Jul 4th 2008, 9:01 pm

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!

gezzle

Jul 5th 2008, 1:39 am

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.

catapop

Jul 5th 2008, 2:50 am

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

sam79

Jul 10th 2008, 5:39 am

Thanks for the tips guys. I ended doing something a little simpler, and it works great.

See ya around
Sam

mexabet

Sep 30th 2008, 2:49 am

Can you please share with us how you did it, because I'm currently trying to achieve the same thing?

Thanks for the tips guys. I ended doing something a little simpler, and it works great.

See ya around
Sam

sam79

Oct 2nd 2008, 11:46 am

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

dimitar christoff

Oct 3rd 2008, 2:36 pm

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....