I found solution for Chrome!
It is sufficient to add
background-repeat:no-repeat;
to BODY tag css declaration, as showed in this updated JsFiddle:
Question
I found an opposite result in Firefox and Chrome when rendering a gradient background with offset set.
Here my css code:
html
{
background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
background-position: center top 30px;
}
body
{
background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
background-position: center bottom 100px;
}
The idea is to apply a sort of "Sliding doors" of background applying 2 opposite gradient onto html and body elements.
The problem rises when I set the bottom offset in Body tag: Firefox translates up with positive values, while Chrome translate up with negative values (or bottom with positive). So two major browsers have opposite behaviour.
How to solve this?
Solution
I found solution for Chrome!
It is sufficient to add
background-repeat:no-repeat;
to BODY tag css declaration, as showed in this updated JsFiddle: