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?
<!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>
$(document).ready(function() {
$('body').css('background-image', 'url("../Images/IMAG0291.jpg")');
});
CSS if needed:
@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);
}
