Hola, en un proyecto que tuve que hacer tuve el mismo problema. Te enseño mis soluciones.. Estuve buscando codigo que sea compatible con la mayor cantidad posible de navegadores. Aquí tienes el código:
Código CSS:
Ver originalbackground-image: url(template_images/gradient.svg);
background-size: 100% 100%;
background-repeat: repeat-x;
background-position: 0 0;
background-color: #DBDBDB; /* old browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DBDBDB',GradientType=0 ); /* ie */
background-image: -o-linear-gradient(rgb(255,255,255),rgb(219,219,219));
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, #DBDBDB),color-stop(0.52, #FFFFFF));
background-image: -moz-linear-gradient(center bottom,#DBDBDB 4%,#FFFFFF 52%);
Te lo explico por partes: Los 3 navegadores que lo soportan son
OPERA: background-image: -o-linear-gradient(rgb(255,255,255),rgb(219,219,219));
GOOGLE CHROME.. etc: background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, #DBDBDB),color-stop(0.52, #FFFFFF));
MOZILLA: background-image: -moz-linear-gradient(center bottom,#DBDBDB 4%,#FFFFFF 52%);
Para internet explorer puedes usar imágenes vectoriales svg que te darán el mismo efecto usando este codigo:
background-image: url(template_images/gradient.svg);
background-size: 100% 100%;
background-repeat: repeat-x;
background-position: 0 0;
Para versiones anteriores de internet explorer usa esto:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DBDBDB',GradientType=0 ); /* ie */
Lo único malo que tiene es que no soporta bordes curvados.. lo que no importa en navegadores viejos que no lo sportan.
Y para el resto de navegadores que simplemente no lo sporten.. usa ésto:
background-color: #DBDBDB;
Espero haberte ayudado. Un saludo, Robert.