Debugging a Broken Stylesheet: CSS Background Disappears when Scroll Off Bottom of Screen

I recently worked on an existing project where we decided to add a background to the site. Whether this is a background color or background image, the same problem occured.

The problem was that the background loaded fine in the screen. But when the user used the scrollbar to scroll below the bottom edge of the screen, the background immediately turned white. The footer panel was colorized as desired, but the background just disappeared.

I'm going to provide my debugging steps so you can learn how to debug your styles. I created a new theme folder in my App_Themes directory. I copied just the CSS stylesheet which included the coding for my body background image/color. I changed the theme in my web.config file. I restarted the program and the background was fine and continued below the bottom of the screen as desired.

So now I needed to find the stylesheet which was causing the problem.

I then inserted another stylesheet which also included "body" elements. I removed every style from that sheet that had nothing to do with what was on my page, such as tables, tds, etc. I refreshed my page and the problem returned.

I then deleted one element selector at a time, refreshing the screen, until the problem went away. From this I determined which element was causing the problem. I then removed one property at a time from the element until the problem went away. Typically by this time, it's pretty evident which property is the culprit.

My problem? The below coding was in the stylesheet:

The above background property was overriding my background as shown below. Even adding !Important to the background property did not resolve the issue. Once I removed he above background color, everything worked fine.