Having trouble trying to get the body image to show when i put the background image into a jquery script it doesnt show at all. Any ideas?

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script src="js/background.js" type="text/javascript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CSS/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="infoBanner"><div id="infoHeader"></div>
  <div id="imageThumbnail">Content for  id "imageThumbnail" Goes Here</div>
</div>
</div>
</body>

</html>
Code:
$(document).ready(function() {
   $('body').css('background-image', 'url("../Images/IMAG0291.jpg")');
});
CSS if needed:

Code:
@charset "utf-8";
html{
height: 100%;
width:100%;
}

body {
	no-repeat center center fixed;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%;
	width: 100%;
	margin: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	
} #infoBanner {
	color: white;
	min-height: 100%;
	width: 200px;
	background-image: url(../Images/blackBackground.png);
	background-repeat: repeat;
}
#infoHeader {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: normal;
	text-transform: capitalize;
	color: #CCC;
	background-image: url(../Images/NewYorkCity/NewYorkCity.png);
	background-repeat: no-repeat;
	height: 120px;
	width: 200px;
}

#wrapper{
	height: 100%;
	width: 100%;
}
#imageThumbnail {
	position: absolute;
	height: 75px;
	width: 100%;
	bottom: 0px;
	margin-bottom: 30px;
	background-image: url(../Images/blackBackground.png);
}