0

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?

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • I don't think it's a good idea to style `html` and `body`. I'd use two `div`s and apply the gradient on them. – otinanai Jul 08 '13 at 12:05
  • It's a not so rare solution.... documented on many websites... ;-) – Luca Detomi Jul 08 '13 at 12:40
  • Can you point to a testcase showing your problem? I tried this locally, and for both browsers positive values for offset from bottom mean translation up (which is what the spec requires). – Boris Zbarsky Jul 08 '13 at 14:17
  • Look at this: [link](http://jsfiddle.net/pfbJJ/1) Particularly attention to Background. Firefox shows the correct behaviour. To obatin the same in Chrome, I must to set a negative value for bottom offset! – Luca Detomi Jul 08 '13 at 14:48

1 Answers1

0

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:

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77