Question

I am trying get this background to fade in on click. I found one tutorial that was helpful, and I ended up created the code so it has two images, and they fade in and out on click to bring up the picture.
Here’s the work: http://www.mccraymusic.com/bgchangetest.html

Only a couple of issues though:

1. How do I make this work without the images getting selected at random? I’d like it to just switch from the plain black image to the image with the drum set. (And cross-fade to if possible, but not necessary)

2. How do I center the image on the page, so the image of the drums are centered?

Answer 1

I’m guessing this is what you’re after:

$(function() {
    var images = ["black.jpg","bg.jpg"];
    $('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);

    $('.entersite').click(function(e) {
        e.preventDefault();
        var image = images[1];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image); 
              $(this).fadeIn(1000);
        });
        $(this).fadeOut(1000, function() {
            $(this).remove();
        });
    });
});​

DEMONSTRATION

Also added :

display: block;
margin-left: auto;
margin-right: auto;

to your #bg element to center the image.