PROBLEMAS PARA DEFINIR UN FONDO DEGRADADO DENTRO DEL BODY EN HTML
Hola, en esta entrada quiero compartir un pequeño problema que he tenido al intentar definir un fondo degradado dentro de una etiqueta body en un documento html. El ejercicio en cuestión se trataba de realizar un formulario de sign-up sobre un fondo degradado que ocupara todo el documento. En principio pensé que lo mejor sería aplicar el formato CSS de degradado al body pero el resultado fue del todo inesperado. En vez de rellenar todo el fondo, el degradado se repetía por franjas a lo alto de todo el documento. Incluso indicando un height de 100%.
body{
height:100%;
background: -moz-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #183842), color-stop(100%, #9C9594)); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* ie10+ */
background: linear-gradient(0deg, #9C9594 0%, #183842 100%); /* w3c */
}
Probé a incluir la opción no-repat pero no obtuve éxito.
Buscando por Google encontre la solución en el siguiente foro:
http://www.comocreartuweb.com/consultas/showthread.php/56200-problema-con-color-de-fondo-en-body
Ha sido tan fácil como aplicar el CSS a la etiqueta html en vez de a body y con este sencillo cambio el problema ha quedado resuelto.
html{
height:100%;
background: -moz-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #183842), color-stop(100%, #9C9594)); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, #9C9594 0%, #183842 100%); /* ie10+ */
background: linear-gradient(0deg, #9C9594 0%, #183842 100%); /* w3c */
}
