¿Cómo conseguir que el degradado CSS3 abarque la altura de toda la página, no solo la ventana gráfica?

Tengo un gradiente de CSS entre navegadores, como este:¿Cómo conseguir que el degradado CSS3 abarque la altura de toda la página, no solo la ventana gráfica?

#background { 
    background: #1E5799; /* old browsers */ 
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0); /* ie */ 
}

Pero necesito que abarcan la altura de toda la página, no sólo el área de visualización. En otras palabras, debo aplicar el estilo a un elemento que tenga la misma altura que toda la página, que normalmente sería body o html.

Otras complicaciones: También estoy usando el sticky footer, que requiere htmlbody y que se establezcan a la altura del 100%. Así que aplicarles el estilo resulta en que solo se llena la ventana gráfica.

Ni siquiera estoy seguro de si lo que estoy pidiendo es posible, pero cualquier ayuda sería apreciada.

Fuente

2011-01-11 Herman Schaaf

basado en la solución de Kyle, así como los otros estilos de la sticky footer, aquí es el solución que finalmente funcionó:

.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px; 
background: #1E5799; /* old browsers */ 
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0); /* ie */ } /* corresponds to height of #footer */ 

#body-wrapper { 

    height: 100%; 
    width: 100%; 
}

Con el código HTML siguiente:

<body> 
<div id="body-wrapper"> 
    <div class="wrapper"> 
     <p>Your website content here.</p> 
     <div class="push"></div> 
    </div> 
    <div class="footer"> 
     <p>Copyright (c) 2008</p> 
    </div> 
</div> 
</body>

Fuente

2011-01-11 13:21:15

Esto es útil, no funcionó para mí porque mi envoltorio para pie de página adhesivo es de 1050px de ancho fijo, así que acabo de agregar su div envoltura de cuerpo alrededor y poner gradiente sobre eso. La misma forma html acaba de agregar gradiente a envoltorio de cuerpo en lugar de envoltorio. Gracias – formatc

Puede envolver todo el contenido de la página en un div de fondo, luego configurarlo para eso. De esta forma, el div de envoltura se llenará con todo tu contenido y el fondo se expandirá por toda la página.

HTML:

<body> 
<div id="background-wrapper"> 
<!--all your content--> 
</div> 
</body>

CSS:

#background-wrapper { 
    background: #1E5799; /* old browsers */ 
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0); /* ie */ 
    height: 100%; 
    width: 100%; 
}

Eso debería hacerlo :)

Fuente

2011-01-11 12:25:29 Kyle

+1 Por enviarme en la dirección correcta, pero al final eso no funcionó del todo. –

Oye, me alegro de que ayudó de alguna manera :) – Kyle

que no es necesario un envoltorio:

CSS:

body{ 
    width: 100%; 
    height:100%; 
    background-repeat:no-repeat !important; 
    margin:0; padding:0; 
    background: #603813; /* for non-css3 browsers */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28abe2', endColorstr='#ffffff'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#28abe2), to(#ffffff)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #28abe2, #ffffff); /* for firefox 3.6+ */ 

}

HTML de ejemplo:

<body> 

<div id="headerBG"> 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
</div> 

<div id="container"><!--start container--> 
    <div id="content"<!--start content--> 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    content goes here content goes here content goes here content goes here 
    </div><!--end content--> 
</div><!--end container--> 

</body>

El gradiente no lo hará ¡muestra si no tienes ningún contenido dentro de tus divs! :) ¡Espero que esto ayude!

Fuente

2011-06-06 16:21:08 LS1

Esto no funciona si el contenido se extiende a la ventana gráfica ... –

Esto debería funcionar, pero lamentablemente no lo hace en FireFox. – superluminary

-3

html, body {line-height:1.5;background:#23538a; 

background: -moz-linear-gradient(top, #ffffff 0%, #23538a 50%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#23538a)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffffff 0%,#23538a 50%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffffff 0%,#23538a 50%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffffff 0%,#23538a 50%); /* IE10+ */ 
background: linear-gradient(top, #ffffff 0%,#23538a 50%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#23538a',GradientType=0); /* IE6-9 */ 
}`

Fuente

2011-11-18 08:23:43 BAM

¿Cuál es toda la malarkey de altura de línea? – superluminary

Otra opción si desea que el degradado se escale SÓLO a su ventana gráfica, pero que se mantenga al desplazarse. Entonces, en lugar de que el degradado traza la altura completa del documento, permanece relativo solo a lo que es visible. (Pruébelo usted verá lo que estoy diciendo)

background-attachment: fixed;

Fuente

2012-05-04 18:02:22 chainwork

html body { 
    min-height: 100%; 
}

que va a hacer el truco, la propiedad min-height se extiende por la altura total, incluso si la página es desplazable, pero propiedad height establece la altura de la vista activa -port como 100%.

¡Esto funciona con el navegador cruzado!

Fuente

2012-09-11 03:10:20 Praz

La altura mínima en los elementos html y body fue la solución correcta. Por supuesto que no funcionará en IE6 pero viviré con eso. – superluminary

¿Cómo conseguir que el degradado CSS3 abarque la altura de toda la página, no solo la ventana gráfica?

Respuesta

Cuestiones relacionadas