2012-04-18 12 views
6

estoy usando un código CSS como la siguiente para la creación de un fondo degradado radial:Cómo crear un degradado radial de cobertura completa?

body 
{ 
background-color: #0176A0; 
background-image: -moz-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: -webkit-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: -o-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: -ms-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
filter:    progid:DXImageTransform.Microsoft.gradient(startColorstr = '#029CC9', endColorstr = '#005077', GradientType = 0); 
} 

pero el resultado no es el deseado! Mi objetivo es tener un fondo de degradado radial que cubra toda la ventana gráfica. Puedo usar la propiedad background-size que forma parte de la especificación CSS3 para obtener un mejor resultado, pero desafortunadamente esta propiedad no funciona en IE.
¿Alguien tiene una idea por favor?

+2

Objetivo 'html', deje' body' permanecer transparente. – MetalFrog

Respuesta

10

añadir esto a tu CSS:

html { 
    height: 100% 
} 
11

Aún mejor:

html { 
    min-height: 100%; 
} 

Esto hará que el gradiente se extiende a la altura de su contenido de lo contrario se limita sólo a la altura de la ventana.