Css texture radial gradient

Question

I have a problem with radial gradient and texture. I have something like this:

background-image: url('../img/texture.png'); 
/* fallback */ 
background:  -moz-radial-gradient(rgba(253,253,253,0.1) 0%, rgba(237,237,242,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, color-stop(0%,rgba(253,253,253,0.1)), color-stop(100%,rgba(237,237,242,0.7))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* Opera 11.10+ */
background: -ms-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* IE10+ */
background: radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1adb7c64', endColorstr='#b3dd532f',GradientType=0 ); /* IE6-9 */

but I get radial gradient without that background texture(../img/texture.png). Anyone know how to do this? Thanks in advance for your answers

This > http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients — Mariyan, Sep 03 '13 at 08:30
I think you are not getting the gradients because of the declaration order, if you swap the url and the gradient's positions in the linked answer, you will probably get the same result as my answer. (in essence, the gradient is there, but your image is being drawn over it, hiding it from view.) — Rodik, Sep 03 '13 at 08:46

score 1 · Accepted Answer · answered Sep 03 '13 at 08:32

You are overriding the background-image property by assigning new values to background immediately after.

to keep both backgrounds in each case, you should specify both backgrounds in every re-declaration of background, using comma separated notation

example:

background: -webkit-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%),
                                    url('../img/texture.png');

Css texture radial gradient

1 Answers1