Am I doing something wrong in the code? I have a background picture for the footer but I don't want it to be like it is right now, I want the picture to repeat across the x-axis without messing up the page the way it is. Do I have to like overlap it or what? Please help me out!
http://visualizecontrollers.webege.com/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VisualizeControllers</title>
<style type="text/css">
.Container {
height: 1397px;
width: 1280px;
margin-right: auto;
margin-left: auto;
margin: 0 auto 0 auto;
}
body {
background-image: url(images/BG.jpg);
background-repeat: repeat;
}
#HeaderContainer {
position: relative;
width: 1280px;
height: 145px;
z-index: 1;
top: 0px;
left: 0px;
margin-left: auto;
margin-right: auto;
}
#Logo {
position: absolute;
width: 117px;
height: 117px;
z-index: 2;
left: 34px;
top: 13px;
}
#VisualizeControllers {
position: absolute;
width: 344px;
height: 51px;
z-index: 2;
left: 183px;
top: 32px;
}
#Slogan {
position: absolute;
width: 376px;
height: 25px;
z-index: 2;
left: 199px;
top: 86px;
}
#TopNavigationContainer {
position: absolute;
width: 274px;
height: 58px;
z-index: 2;
left: 969px;
}
#Login {
position: absolute;
width: 38px;
height: 22px;
z-index: 2;
left: 36px;
top: 18px;
}
#Register {
position: absolute;
width: 59px;
height: 22px;
z-index: 2;
left: 99px;
top: 18px;
}
#MyCart {
position: absolute;
width: 58px;
height: 22px;
z-index: 2;
left: 181px;
top: 18px;
}
#NavigationMenuBox {
position: absolute;
width: 1124px;
height: 75px;
z-index: 2;
left: 76px;
top: 146px;
text-align: center;
}
#MenuBar1 .MenuBarItemSubmenu {
background-color: transparent;
}
#Footer {
position: absolute;
// or fixed if you want it to scroll along
left: auto;
right: auto;
width: 100%
bottom: 10px; // change to the value you want
clear:both;
height: 223px;
z-index: 2;
top: 1175px;
overfow-x: hidden;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div class="Container" id="Container">
<div id="HeaderContainer">
<div id="Logo"><img src="images/Logo.jpg" width="114" height="115" /></div>
<div id="VisualizeControllers"><img src="images/VisualizeControllers.jpg" width="407" height="51" /></div>
<div id="Slogan"><img src="images/Slogan.jpg" width="375" height="24" /></div>
<div id="TopNavigationContainer">
<div id="Login"><img src="images/Login.jpg" width="38" height="22" /></div>
<div id="Register"><img src="images/Register.jpg" width="59" height="22" /></div>
<div id="MyCart"><img src="images/MyCart.jpg" width="55" height="21" /></div>
</div>
<div id="NavigationMenuBox">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About</a>
<ul>
<li><a href="#">Our Team</a></li>
</ul>
</li>
<li><a href="#">Create a Controller</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="Footer"><img src="images/BGFooter.jpg" width="1280" height="263" background-repeat:"repeat-x"> </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
