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

430

Ok, digamos que el contenido dentro de los <body>totales de 300 px de alto.

Si configuro el fondo de mi <body>uso -webkit-gradiento-moz-linear-gradient

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

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

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

css gradient

— JD Isaacks
fuente

718

Aplica el siguiente CSS:

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

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

Editar: agregado background-attachment: fixed;a la declaración del cuerpo por comentarios ( Johe Green ).

— Bryan Downing
fuente

44

También descubrí que tenía que añadir margin:0;en bodyo de lo contrario me dieron un hueco en el fondo de mi página.

— Martin

8

En Chrome y Safari, el cuerpo {height: 100%} da como resultado que la página (pero no el gradiente) se extienda fuera de la ventana gráfica.

— thSoft

13

Tuve que agregar un adjunto de fondo: fijo; al cuerpo para deshacerse del espacio inferior (Webkit).

— j7nn7k

44

Establecer un fondo para el cuerpo y luego la altura de la etiqueta html al 100% hace cosas extrañas en Internet Explorer. Aquí hay un ejemplo (png).

— Justin Force

21

Asegúrese de que background-repeaty background-attachmentvenir después de sus backgroundreglas. De lo contrario, el fondo aún podría repetirse.

— Kellen

159

En cuanto a una respuesta anterior, la configuración htmly bodyal height: 100%no parece trabajo si las necesidades de contenido de desplazamiento. Agregar fixedal fondo parece corregir eso: noneed for height: 100%;

P.ej:

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

Expandir fragmento

— Joshua Rudd
fuente

55

Esto funcionó para mí en todos los navegadores que probé (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] y Opera [Mac]) sin el efecto secundario de la barra de desplazamiento de la "altura: 100%" solución. ¡Gracias!

— pipwerks

77

Una nota para aquellas personas que usan Sass / Compass. No se puede establecer "fijo" directamente en el mixin, así que para agregar fijo se agrega la propiedadbackground-attachment: fixed

— Kyle Mathews

2

Si desea que el fondo llene la ventana o el contenido (el que sea mayor), use min-height:100%(en navegadores compatibles)

— cjk

Pude ejecutar el siguiente código usando Compass: @include fondo (gradiente lineal (superior, rojo 0%, azul 100%) fijo);

— mcranston18

¿Cómo agregaría un tercer color?

— sbaden

17

Sé que llego tarde a la fiesta, pero aquí hay una respuesta más sólida.

Todo lo que necesita hacer es usar en min-height: 100%;lugar de height: 100%;y su fondo degradado extenderá 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);
}

— Ricardo Zea
fuente

A menos que necesite establecer la altura html al 100%, por ejemplo, si necesita un pie de página adhesivo

— apieceofbart

15

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

   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');
   }

<body>
  <h1>Hello world!</h1>
</body>

Expandir fragmento

He probado esto en FireFox 3.6, Safari 4 y Chrome, mantengo el color de fondo en el cuerpo para cualquier navegador que por alguna razón no sea compatible con el diseño de la etiqueta HTML.

— John Sanford
fuente

13

La configuración html { height: 100%}puede causar estragos con IE. Aquí hay un ejemplo (png). ¿Pero sabes lo que funciona bien? Simplemente configure su fondo en la <html>etiqueta.

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

El fondo se extiende hasta el fondo y no se produce un comportamiento de desplazamiento extraño. Puede omitir todas las otras correcciones. Y esto es ampliamente compatible. No he encontrado un navegador que no te permita aplicar un fondo a la etiqueta html. Es CSS perfectamente válido y lo ha sido por un tiempo. :)

— Justin Force
fuente

1

@Lynda Esa no es una respuesta muy útil. ¿Le importaría proporcionar un caso en el que no funciona?

— Justin Force

Perdón por ser vago. No estoy seguro de por qué no funciona. Puede agregar un gradiente htmlpero en mi caso se detiene en la mitad de la página. Agregar background-attachment:fixedsí resuelve el problema. He visto que esto sucede en más de un sitio, pero no he podido encontrar la causa.

— L84

El objetivo de esta solución es que funcionó en todos los navegadores (en 2012, por cierto). Pero aún no indicas de qué navegador estás hablando. Si todavía tiene problemas, intente agregar html, body { height: 100%; }.

— Justin Force

Cierto. Sucede en Firefox y Chrome (no probé en otros navegadores) y probé la altura y otras configuraciones sin suerte (excepto el adjunto de fondo). Oh, bueno, no es gran cosa y espero que tu respuesta aún funcione para la mayoría. =>

— L84

Todavía tiene que engañar sin repetición y arreglado.

— MarsAndBack

12

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

Cree un gradiente aquí: http://www.colorzilla.com/gradient-editor/
Establecer gradiente en HTML en lugar de BODY.
Arregle el fondo en HTML con "background-attach: fixed;"
Desactiva los márgenes superior e inferior en BODY
(opcional) Por lo general, creo uno en el <DIV id='container'>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.

— Rick Smith
fuente

1

¡Excelente! Estaba usando colorzilla y la respuesta principal no funcionó para mí. Este lo hizo. ¡Gracias! :)

— Filly

¿Por qué prefiere hacerlo en HTML, no en BODY?

— sashaikevich

@sashaikevich Gran pregunta. Apenas he visto esta respuesta en 5 años, así que no recuerdo nada. La razón por la que lo hice podría no aplicarse incluso con todas las actualizaciones del navegador. Si lo movieras todo al cuerpo, me gustaría saber si funcionó igual.

— Rick Smith

@ RickSmith No, diseñé html. Pero, moví las reglas para aplicarlas al cuerpo ahora mismo para verificar, y eso no hizo ninguna diferencia. Tal vez era una cosa vieja del navegador ...

— sashaikevich

4

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

— subv3rsion
fuente

1

El fondo predeterminado establecido como el color del gradiente final sería una gran solución si el gradiente se detuviera, pero no solo detiene su repetición, por lo que el fondo predeterminado solo se vería si el gradiente no es compatible.

— JD Isaacks

2

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

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

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

— morefromalan
fuente

0

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 puede crear sus propios grandes gradientes en http://www.colorzilla.com/gradient-editor/

/ Sten

— Netsi1964
fuente

-1

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;

— Joe
fuente

1

Agregue alguna explicación sobre los aspectos clave de su solución.

— Rachcha

-1

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 que flotara el cuerpo, había una brecha 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 gradiente. Así que floté el cuerpo y establecí su posición en relativa y el ancho en 100%. funcionó en safari, chrome, firefox, opera, internet expl .. oh espera. :PAGS

¿Qué piensan ustedes?

— grizzy
fuente

-4

en lugar de 100%, solo agregué un poco de pixxel, obtuve esto ahora y funciona para toda la página sin espacio:

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

— Lijadora
fuente

3

¿Qué pasa con las páginas con> 1420 px de altura?

— veritas