El fondo de degradado CSS3 establecido en el cuerpo no se estira, sino que se repite?

vale decir que el contenido dentro del sum 300 px de alto.

Si configuro el fondo de mi usando -webkit-gradient o -moz-linear-gradient

Luego maximizo mi ventana (o la hago más alta que 300px), el gradiente será exactamente 300px alto (el alto del contenido) y simplemente repito para llenar el rest de la ventana.

Supongo que esto no es un error, ya que es el mismo tanto en webkit como en gecko.

Pero, ¿hay alguna manera de hacer que el gradiente se extienda para llenar la ventana en lugar de repetir?

Aplicar el siguiente CSS:

 html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } 

Editar: margin: 0; agregado margin: 0; a la statement del cuerpo por comentarios ( Martin ).

Editar: agregado de background-attachment: fixed; añadido background-attachment: fixed; a la statement del cuerpo por comentarios ( Johe Green ).

Con respecto a una respuesta anterior, configurar html y body to height: 100% no parece funcionar si el contenido necesita desplazarse. Agregar fixed al fondo parece arreglar eso, sin need for height: 100%;

P.ej:

 body { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed; } 

Esto es lo que hice para resolver este problema … mostrará el degradado para toda la longitud del contenido, luego simplemente retrocederá al color de fondo (normalmente el último color en el degradado).

  html { background: #cbccc8; } body { background-repeat: no-repeat; background: #cbccc8; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)); background: -moz-linear-gradient(top, #fff, #cbccc8); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8'); } 
  

Hello world!

Establecer html { height: 100%} puede causar esgulps en IE. Aquí hay un ejemplo (png). ¿Pero sabes lo que funciona bien? Simplemente configure su fondo en la etiqueta .

 html { -moz-linear-gradient(top, #fff, #000); /* etc. */ } 

El fondo se extiende a la parte inferior y no se produce un comportamiento extraño de desplazamiento. Puede omitir todas las otras correcciones. Y esto es ampliamente compatible. No he encontrado un navegador que no permita aplicar un fondo a la etiqueta html. Es CSS válido y válido desde hace un tiempo. 🙂

Hay mucha información parcial en esta página, pero no es completa. Esto es lo que hago:

  1. Crea un degradado aquí: http://www.colorzilla.com/gradient-editor/
  2. Establecer degradado en HTML en lugar de BODY.
  3. Repare el fondo en HTML con “background-attachment: fixed;”
  4. Desactiva los márgenes superior e inferior en BODY
  5. (opcional) Normalmente creo un

    que pongo todo mi contenido

Aquí hay un ejemplo:

 html { background: #a9e4f7; /* Old browsers */ background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */ background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-attachment: fixed; } body { margin-top: 0px; margin-bottom: 0px; } /* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */ #container { width: 800px; margin: auto; background-color: white; border: 1px solid gray; border-top: none; border-bottom: none; box-shadow: 3px 0px 20px #333; padding: 10px; } 

Esto se ha probado con IE, Chrome y Firefox en páginas de varios tamaños y necesidades de desplazamiento.

Sé que llego tarde a la fiesta, pero esta es una respuesta más sólida.

Todo lo que necesita hacer es usar min-height: 100%; en lugar de height: 100%; y su fondo de degradado se extenderá a toda la altura de la ventana gráfica sin repetir, incluso si el contenido es desplazable.

Me gusta esto:

 html { min-height: 100%; } body { background: linear-gradient(#ff7241, #ff4a1f); } 

Sucio; tal vez podrías agregar una altura mínima: 100%; a html, y tags de cuerpo? Eso o al menos establece un color de fondo predeterminado que es el color del degradado final también.

Tuve problemas para obtener las respuestas aquí para trabajar.
Descubrí que funcionó mejor para arreglar un divisor de tamaño completo en el cuerpo, darle un índice z negativo y adjuntarle el degradado.

   

Aquí hay una muestra completa https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

 background: #13486d; /* for non-css3 browsers */ background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d'); background-repeat:no-repeat; 

Esto es lo que hice:

 html, body { height:100%; background: #014298 ; } body { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298)); background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%); background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%); /*I added these codes*/ margin:0; float:left; position:relative; width:100%; } 

antes de flotar el cuerpo, había un espacio en la parte superior, y mostraba el color de fondo de html. si elimino el bgcolor de html, cuando me desplazo hacia abajo, se corta el degradado. entonces flote el cuerpo y establezco su posición relativa y el ancho al 100%. funcionó en safari, cromo, firefox, opera, internet expl … oh espera. :PAG

¿Qué piensan ustedes?

He usado este código CSS y funcionó para mí:

 html { height: 100%; } body { background: #f6cb4a; /* Old browsers */ background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */ background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */ height: 100%; background-repeat: no-repeat; background-attachment: fixed; width: 100%; background-position: 0px 0px; } 

Una información relacionada es que puedes crear tus propios degradados en http://www.colorzilla.com/gradient-editor/

/ Sten

en lugar de 100%, simplemente agrego algunos píxeles que obtuvieron esto ahora y funcionan para toda la página sin brecha:

 html { height: 1420px; } body { height: 1400px; margin: 0; background-repeat: no-repeat; }