El gradiente CSS se detiene y se repite

I have a CSS gradient in my stylesheet. The problem I have is that the colour goes from #FFFFFF a #EBEBEB, but when there is a lot of content on a page and you have to scroll down the gradient repeats itself, where the further down the page it should stay #EBEBEB.

A continuación se muestra el código:

body {
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EBEBEB));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #FFFFFF, #EBEBEB);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #FFFFFF, #EBEBEB);

  /* IE 10 */
  background: -ms-linear-gradient(top, #FFFFFF, #EBEBEB);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #FFFFFF, #EBEBEB);
}

Alguien puede ayudarme.

Gracias.

preguntado el 10 de marzo de 12 a las 12:03

In which browser are you seeing this? I can't reproduce in FF10. What's the minimum page height in px to recreate this? -

1 Respuestas

Quizás esto ayude: no-repeat

html {
  background-color: #EBEBEB;
}    
body {
    /* fallback */
  background-color: #EBEBEB;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EBEBEB)) no-repeat;

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #FFFFFF, #EBEBEB) no-repeat;

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #FFFFFF, #EBEBEB) no-repeat;

  /* IE 10 */
  background: -ms-linear-gradient(top, #FFFFFF, #EBEBEB) no-repeat;

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #FFFFFF, #EBEBEB) no-repeat;
}​

respondido 10 mar '12, 12:03

I have tried the no repeat but nothing, and adding html background colour changes different aspects on my website. - jameswildi

He hecho un ejemplo aquí: jsfiddle.net/fB9Wk Doesn't repeat on my computer. Perhaps you have additional CSS, that makes the mess. Have you got a URL? - Yunzen

Ok thanks. I don't have a URL I got it running on localhost. Ill have a play around with things. - jameswildi

Try to isolate the code and test it on jsfiddle.net. If the error still is there, you now, it is in this code, if not it must be somewhere else. If you still have erronious code, save the fiddle and post here the url - Yunzen

It would be easier to just add background-repeat: no-repeat; at the end, instead of adding no-repeat a cada background declaración. - treinta y dos

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.