tipos - fondos css
El fondo de degradado CSS3 establecido en el cuerpo no se estira sino que se repite (12)
ok, diga que el contenido dentro del <body> totaliza 300px de altura.
Si configuro el fondo de mi <body> usando -webkit-gradient o -moz-linear-gradient
Luego maximizo mi ventana (o simplemente la elevo a 300px), el gradiente tendrá exactamente 300px de altura (la altura del contenido) y solo repetiré para llenar el resto de la ventana.
Supongo que esto no es un error ya que es el mismo tanto en webkit como en gecko.
¿Pero hay una 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;
}
Edición: margin: 0; añadido margin: 0; a la declaración del cuerpo por comentarios ( Martin ).
Edición: agregado de background-attachment: fixed; a la declaración del cuerpo por comentarios ( Johe Green ).
Con respecto a una respuesta anterior, establecer html y body en height: 100% no parece funcionar si el contenido necesita desplazarse. La adición de elementos fixed al fondo parece solucionarlo, sin need for height: 100%;
P.ej:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
En lugar de 100%, solo agregué algunos píxeles. Obtuve esto ahora y funciona para toda la página sin espacio:
html {
height: 1420px; }
body {
height: 1400px;
margin: 0;
background-repeat: no-repeat; }
Establecer html { height: 100%} puede causar estragos en IE. Aquí hay un ejemplo (png). ¿Pero sabes qué funciona genial? Solo establece tu fondo en la etiqueta <html> .
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
El fondo se extiende a la parte inferior y no se produce ningún comportamiento de desplazamiento extraño. Puede omitir todas las otras correcciones. Y esto es ampliamente apoyado. 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. :)
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 del 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'');
}
<body>
<h1>Hello world!</h1>
</body>
He probado esto en FireFox 3.6, Safari 4 y Chrome. Mantengo el color de fondo en el cuerpo de cualquier navegador que por alguna razón no admita el estilo de la etiqueta HTML.
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. Así que floté el cuerpo y puse su posición en relativa y el ancho en 100%. funcionó en safari, chrome, firefox, opera, internet expl ... oh espera. :PAG
¿Qué piensan ustedes?
Hay mucha información parcial en esta página, pero no completa. Esto es lo que hago:
- Crea un gradiente aquí: http://www.colorzilla.com/gradient-editor/
- Establecer gradiente en HTML en lugar de BODY.
- Corrige el fondo en HTML con "background-attach: corregido";
- Apague los márgenes superior e inferior del CUERPO
- (Opcional) Normalmente creo un
<DIV id=''container''>que puse 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 diversos tamaños y necesidades de desplazamiento.
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 gradientes en http://www.colorzilla.com/gradient-editor/
/ Sten
Sé que llego tarde a la fiesta, pero aquí hay una respuesta más sólida.
Todo lo que necesitas hacer es usar min-height: 100%; en lugar de height: 100%; y su fondo degradado extenderá toda la altura de la vista sin repetirse, incluso si el contenido es desplazable.
Me gusta esto:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}
Sucio; tal vez podría simplemente agregar una altura mínima: 100%; a las etiquetas html y body? Eso o al menos establecer un color de fondo predeterminado que también es el color del degradado final.
Tuve problemas para obtener las respuestas aquí para trabajar.
Encontré que funcionó mejor para arreglar una división 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
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;