CSS - When you use the scroll bar the repeat-y background image is not appearing

HTML & CSS
1

I have the weirdest error happening to my website. Admittedly I have not done any extensive testing on multiple operating systems and browsers. However on my Mac using Safari and Firefox I see something weird happening with my background image and I am not sure how to fix it.

body {
  margin: 0;
  background-color: #b87431;
  background-image: url(../img/dice_slice.jpg);
  background-repeat: repeat-y;
  background-position:center
}

The problem I am having is when you use the scroll bar the background image is not appearing. That is when you first open the web page the background appears fine but when you scroll down the image is not there. However when you resize the browser the background works just fine.

You can visit the following link and maybe you will see what I am talking about.

http://www.webskillsplus.com/packwood/index.php

You can also take a look at the CSS at the following link

http://www.webskillsplus.com/packwood/css/massage.css

Anyone have any ideas? Thanks in advance for your help.

2

try html{height:100%; } body{min-height:100%; } ( on a conditional stament for IE<8 put body{height:100%; } ) that should do it.

3

I’d just move the BG image from the body, to your overall containing div (that encompasses the page).

4

Thanks for responding everyone. I removed the following code and it took care of the problem. Thanks again.

html {
background-color: #b87431;
}

5