Question

I think I may be trying something that isn’t possible.

I was recently tasked to create a html version of the flash site. On the flash site when you click on the body the image changes. I have done this with JQuery. Its brilliant! However.. it isn’t “flash” enough. The powers that be want a fade effect between images.

This is where I have come completely undone.

This is how my script works at the moment.

Images are stored in a div called photos. This is hidden.

<div id="photos">
  <img src="image.jpg" alt="Some caption" style="#page-bg-color" />
</div>

When the page is loaded jquery checks to see if the first image is loaded. If it isn’t then a loading symbol spins. When the image is loaded, it becomes the body background.

$("body").css('background', 'url(' + photos[currentImage]["url"] + ') no-repeat 50% 50% fixed ' + photos[currentImage]["background"]);

I have tried the following.

I have tried animate. However, this doesn’t work.

I have tried this plugin: http://plugins.jquery.com/project/bgImageTransition

This doesn’t work either. It appears to clone the tag and do something. I assume it isn’t working because you cannot clone the body tag. That or it is really old and is no longer compatible with the current version of JQuery.

I fear that I have coded my way down a dead end. Does anybody know how I could make this work?

Answer 1

There is no way to fade background images without using more than one tag. So the best solution would be using a with 100% width/height right inside your and using the bgImageTransition plugin on that div.