[SOLUCIONADO] Degradado CSS3 + imagen de fondo

[dankko]

Hola, me preguntaba como podría utilizar este degradado de fondo combinado con una imagen de fondo, es decir, que el color quede por debajo y la imagen por encima. La imagen tiene un degradado transparente lateral, y combinandola con el fondo degradado de color queda realmente bien, pero no lo logró hacerlo.


Este es el afecto que estoy utilizando para el degradado de color de fondo:

Código CSS:

background: linear-gradient(rgb(208, 208, 208), rgb(242, 242, 242) 50%, rgb(208, 208, 208)) repeat scroll 0% 0% transparent;
box-shadow: 0px 0px 5px rgb(51, 51, 51);
border: 1px solid rgb(239, 241, 239);
position: relative;
 

La imagen es una como esta:

http://d227xyj983n2jj.cloudfront.net...09/scoring.png

Saludos

[pzin]

Puedes usar fondos múltiples. Por ejemplo:

Código CSS:

background-image: url(arbol.png), url(pajaro.png);
background-position: top bottom, left 50%;
background-repeat: no-repeat, repeat;
 

El orden de las imágenes es según el orden de especificación.

Los fondos degradados son como si fuesen otra imagen de fondo más.

[dankko]

Muchas gracias pzin, me diste una idea y pude aplicarlo de otra forma. Os dejo el código por si a alguien le gusta como queda:

Código CSS:

.div{ 
    background: url("http://d227xyj983n2jj.cloudfront.net/wp-content/uploads/2013/09/scoring.png") no-repeat top right, -moz-linear-gradient(rgba(208, 208, 208, 1.0), rgba(255, 255, 255, 0.9) 50%, rgba(208, 208, 208, 1.0));
    box-shadow: 0px 0px 5px rgb(51, 51, 51);
    background: box-shadow: 0px 0px 5px rgb(51, 51, 51);
    border: 1px solid rgb(239, 241, 239);
    position: relative;
    height:100%;
}