All,

I'm having a bit of issue with two scripts. The first makes the background image on the page scale to fit the dimensions of the window, the second replaces the background image.

When coupled together, the resizing script works but the image replacement script does not. I'm not sure if this has anything to do with it, but both scripts are in separate external .js files. Any ideas? Scripts are below.

--thesprucegoose

$(window).load(function() { setHome(); });

$(window).resize(function(){ setHome(); });

Code:
function setHome() {

var winx = $(window).width();
var winy = $(window).height();
var oW = 1024, oH = 768;

if ($.browser.msie == true) { 
	winy = $(document).height();
	$('#imageCrop').css({height:winy});
}

	if (winx/winy > oW/oH){
		winy = winx * oH / oW;
		winx = winx; 
	} else {
		winx = winy * oW / oH;
		winy = winy; 
	}

	$('#fullBG').css({ 
		width:winx, 
		height:winy,
		visibility:'visible'
	});

}
Code:
$(document).ready(function () {

		$('#one').click(function(){
		$('#imageCrop').css('backgroundImage','url(bg1.jpg)');
	
	})

		$('#two').click(function(){
		$('#imageCrop').css('backgroundImage','url(bg2.jpg)'); 
	})
	
		$('#three').click(function(){
		$('#imageCrop').css('backgroundImage','url(bg3.jpg)');
	
	})

		$('#four').click(function(){
		$('#imageCrop').css('backgroundImage','url(bg4.jpg)');
	})
	
		$('#five').click(function(){
		$('#imageCrop').css('backgroundImage','url(bg5.jpg)');
	})
	
	

})
CSS:
Code:
#imageCrop {
	background-image: url(bg1.jpg);
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;}


#fullBG {
	background-image: url(bg1.jpg);
	position: relative;
	height: 100%;
	width: 100%;
	visibility: hidden;}