Background Position: 2 pages, same code, different outcome...

Question

Hey guys,
    I have finished a site that uses the code following CSS:
body {
          background-color: #383637;
          background-image: url(Images/All-Background-Image.jpg);
          background-repeat: no-repeat;
          background-position: center bottom;
          margin: 0px;
    padding: 0px;
This code is the same across all pages yet on the index the background does not position itself at the bottom of the screen, it only centers itself, all of the other pages work. Here is the site:
http://christianstest.info//CherryHillRecreation/Grangerfun.com/Live%20to%20Web/index.html
You can click the blue tabs to see what I mean... I only noticed it on a screen with a resolution with a height of more than 800pixals, otherwise you can't tell I don't believe... any Ideas why this is happening?

Answer 1

The background attached to the body tag like that without being absolute positioned will appear at the bottom of the content, not necessarily the page. The home page is too short for that to stick to the bottom. You should try adding the background into the html tag, instead of body and setting the height to 100%. This could solve it.
html {
          background-color: #383637;
          background-image: url(Images/All-Background-Image.jpg);
          background-repeat: no-repeat;
          background-position: center bottom;
          margin: 0px;
          padding: 0px;
          height:100%;