Skip navigation
iVengeanceHD
Currently Being Moderated

How do I fix my footer background?

Jan 21, 2013 5:58 PM

Tags: #error #background #image #internet #files #html #dreamweaver #link #links #spry #css #layout #ie #html5 #footer #cs6 #ftp

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>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points