Question

I’m trying to make it so that when you click the navigation buttons at the top of my page, they cause the background to change. I was partially successful but the background always switches back immediately and I would like each background to fade into the next one.
Here’s the javascript on the first page with the html:

<script type="text/javascript">
$('li a').click(function(e){
     e.preventDefault();
     $.cookie('currentImg', $('body').css('background-image') );
     $.cookie('nextImg', 'Tranquil.jpg');
});
</script>

<li class="item6" onmouseover="style.backgroundColor='#022D4D';" onmouseout="style.backgroundColor='#032F76';"><a href="Environment.php" onClick="EnvBack();" title="Environment" >Environment</a></li>

Here’s the javascript on the new page:

<script type="text/javascript">
//on next page (Environment.php)

//#nextImage is a div covering the page with a z-index placing just above the body element
$('body').css('background-image', $.cookie('currentImg') );
$('#nextImage').css({
      visibility : 'hidden',
      backgroundImage : $.cookie('nextImg')
  //wait for image to load
}).load(function(){
     //set state to hidden, if it was hidden before rather than merely 
     //invisible the div will not load.
     //then fade in the new image producing a smooth transition
     $(this).css('visibility','visible').fadeIn(function(){
           //reset state of page
           $('body').css('background-image', $.cookie('nextImg') );
           $(this).remove();
     });
});
</script>

Here’s the CSS for the body:

body
{
    background-image:url("abstract1.jpg");
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
}
#nextImage
{
    background-image="";
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
    z-index:1;
}

When I jump to new page.. all the css is invisible instead of it transitioning

Answer 1

Much respect to VAShhh for catching refresh part of this equation.

First you need to transfer the current image setting to the new page via a cookie, the image can remain after refresh. In this example I am going to transfer both the current and the desired image. (jquery cookie plugin required)

//its important to use jQuery here so we have a normalized event object
$('li a').click(function(e){
     e.preventDefault();
     $.cookie('currentImg', $('body').css('background-image') );
     $.cookie('nextImg', 'Tranquil.jpg');
});

//on next page (Environment.php)

//#nextImage is a div covering the page with a z-index placing just above the body element
$('body').css('background-image', $.cookie('currentImg') );
$('#nextImage').css({
      visibility : 'hidden',
      backgroundImage : $.cookie('nextImg')
  //wait for image to load
}).load(function(){
     //set state to hidden, if it was hidden before rather than merely 
     //invisible the div will not load.
     //then fade in the new image producing a smooth transition
     $(this).hide().css('visibility','visible').fadeIn(function(){
           //reset state of page
           $('body').css('background-image', $.cookie('nextImg') );
           $(this).remove();
     });
});

You cannot cross-fade between css background images on the same element. To achieve the effect you are looking for you will need a minium of two elements. One to hold the initial image, and the other to hold the new one. Place the new one over the old one (z-index) and fade the element with the new image in.

You might want to check out a jQuery plugin for this like:
http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html
http://buildinternet.com/project/supersized/
http://tobia.github.com/CrossSlide/

Keep in mind you will also have to preload the next image in line BEFORE fading otherwise it will look shitty.

Here is an example of one that I wrote myself:

http://www.wideopenadventure.com/woa/