Background Gradient Disappears on Long Pages

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.

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.

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:

  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;
  1.  /* ERROR CSS: DO NOT USE !!! */ 
  3.    background:      #f7f7f7; 
  4.    background:      -webkit-linear-gradient(top, #f7f7f7, #f4f4f4)
  5.    background:      -moz-linear-gradient(top, #f7f7f7, #f4f4f4)
  6.    background:      -o-linear-gradient(top, #f7f7f7, #f4f4f4)
  7.    background:      linear-gradient(to bottom, #f7f7f7, #f4f4f4)
  8.    background-clip: padding-box; 
  9.    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:

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

Change from background gradient to solid color

  • 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.
Category: Cascading Stylesheets :: Article: 449

Credit where Credit is Due:

Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman

Related Articles

Joes Revolver Map


Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Donate to Joel Lipman via PayPal

Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.