I am facing a challenge in extending the body background gradient to cover the entire page, regardless of the amount of content present.
When I apply the following CSS code, it results in a white page for longer content: http://jsfiddle.net/AE6dr/1/
html{
height: 100%;
}
body {
height: 100%;
background-image: linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
background-image: -moz-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
background-image: -webkit-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
background-image: -ms-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
background-repeat: no-repeat;
}
Alternatively, removing the html height setting provides a better result for longer content:
http://jsfiddle.net/L6qM8/
However, this approach does not extend the background for pages with minimal content: http://jsfiddle.net/6vaTX/1/
Is there a way to achieve a linear gradient background that adjusts independently of the content?
* EDIT: SUMMARY *
1: http://jsfiddle.net/AE6dr/1/ --> scrolling down results in no background
2: http://jsfiddle.net/6vaTX/1/ --> background does not stretch to the bottom
3: background-size: cover; does not provide a solution