What?
This is a quick article on how to resolve the following issue:
  • Overall body background color is blue.
  • Background color of my contents is white.
  • When I visit a small page on the site, the contents background (white) shows.
  • When I visit a very long page on the site, the contents background disappears and reveals the overall background (blue) making the text very hard to read.

Why?
Took me a while to figure out what was the problem, I'd visit some pages and they'd be fine, but when visiting a long page, it would initially display properly but then the white background would disappear when the page finally loaded.

How?
The root cause was because the template I was using was not actually specifying "white" as the contents background-color and was in fact setting a gradient as the background. Consider the following: 
/* ERROR CSS: DO NOT USE !!! */

  background:      #f7f7f7;
  background:      -webkit-linear-gradient(top, #f7f7f7, #f4f4f4);
  background:      -moz-linear-gradient(top, #f7f7f7, #f4f4f4);
  background:      -o-linear-gradient(top, #f7f7f7, #f4f4f4);
  background:      linear-gradient(to bottom, #f7f7f7, #f4f4f4);
  background-clip: padding-box;
  border-radius:   0 0 5px 5px;

Harmless you might say. Works fine on a small page but I have discovered limitations with the majority of browsers when having to spread gradient backgrounds across a long page. It would appear to be fool proof because of the "background:#f7f7f7" specified at the beginning of the code but it is not. My only solution was to propose to set the background as white (#f7f7f7 - white with a tint of grey) and show the customer the unnoticeable difference: 
/* CORRECTED CSS: STABLE AND CONSISTENT !!! */

  background-color:  #f7f7f7;
  background-clip:   padding-box;
  border-radius:     0 0 5px 5px;

Example
Change from background gradient to solid color

Additional
  • The above issue happened when using Google Chrome v23 or MS Internet Explorer v8 (so Webkit and MSIE appear to be affected).
  • If your website consists of small pages then ignore this issue as it's unlikely to happen on your site.