Multiple Background Images/Gradients

Question

Mam background stworzony z obrazu i linear gradient, jednakże działa I linia gradientu (dla firefoxa), w chromie widać tylko obrazek, bez gradientu pod nim.

background:
url("img.png") center center no-repeat,

-moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.52) 97%, rgba(0,0,0,0.5) 100%);/* FF3.6-15 */
-webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
-linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

 background-size: 60px 60px, cover;

Kombinowałem także w ten sposób (oddzielenie przez przecinki), lecz nie odpaliło:

background:
url("img.png") center center no-repeat,

-moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.52) 97%, rgba(0,0,0,0.5) 100%), -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%), -linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0.52) 97%,rgba(0,0,0,0.5) 100%);

 background-size: 60px 60px, cover;

 

Answer 1

Po 'no-repeat':  ';' zamiast ','

Przed cover w bg size bez przecinka ;)

To na pewno zadziała:

background: #eaeaea url(http://www.yourdomain.pl/bg.png) repeat;

Comments

Gdy zmienię na ";" wcale nie odpala, nawet na firefox. Jesteś pewien, że tak się robi przy multiple backgrounds?

Answer 2

prefixy nie sa juz uzyteczne chyba