5

For a website I am currently designing I would like to have the body background on a rotation of an array of images. I have tried multiple ways i.e. using the fadeIn() and fadeOut() functions but they seem to affect the opacity of the divisions within the body. I also tried using bgStretcher But this caused appearance issues and made the website slow and choppy.

I would preferably like the images to fade in and out. Help would be appreciated,

Here's a link to the website The script file I currently have been modifying is called background.js under the /js/ directory. The file is currently commented out as It is only experimental. The two current background images are "images/bg/bg1.jpg" and "images/bg/bg2.jpg"

Here is my current code which I am trying to get working:

$(document).ready(function() {
    setInterval(switchImage, 5000);
    switchImage();

});

function switchImage()
{
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000);
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000);
}

Once I can figure out how to transition between background images I can simpily add some conditions to change between an array of images.

Cheers, Dane Wilson

Dane Wilson
  • 53
  • 1
  • 1
  • 4
  • Please post the relevant code, with which you'd like our help, *here in your question*. And, ideally, post a [live demo](http://jsfiddle.net/), otherwise, once the problem's solved, this question has no further use (since the problem code will be corrected/removed from the page you link to). – David Thomas Jun 02 '12 at 12:17

2 Answers2

7

Very simple with this jQuery Plugin: jQuery Backstretch In the demos "Using Backstretch in a Slideshow" is a code-snippet for it.

doptrois
  • 1,560
  • 11
  • 10
  • This worked the same as bgStretcher which I mentioned above, but the code is a lot smaller and nicer. I figured out what was causing it to be slow and choppy. It was because I was trying to use an overlay PNG which has transparent properties causing rendering issues. I fixed this by saving my images with the pattern overlay pre-applied – Dane Wilson Jun 02 '12 at 22:55
0

This can be done with css3 only. I'll post a fiddle soon.

EDIT: I tried making an animation with keyframes and CSS3's background-size, but apparently they didn't want to work together too well (flickerings). Probably better to look into jQuery then.

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239