Combining a css3 gradient with a background image

Question

I tred making this work using this reference. Yet it doesn't seem to be doing the trick. Did I miss something? I just need another set of eyes on this. Thank you.

The background image shows, but not the gradient. Here is a fiddle to show you what I mean.

What am I doing wrong?

  background: #23458E;
  background-image: url('/static/images/grey.png'); /* fallback */
  background-image: url('/static/images/grey.png'), -webkit-gradient(linear, left top, left bottom, from(#23458E), to(#2661A8)); /* Saf4+, Chrome */
  background-image: url('/static/images/grey.png'), -webkit-linear-gradient(top, #23458E, #2661A8); /* Chrome 10+, Saf5.1+ */
  background-image: url('/static/images/grey.png'),    -moz-linear-gradient(top, #23458E, #2661A8); /* FF3.6+ */
  background-image: url('/static/images/grey.png'),     -ms-linear-gradient(top, #23458E, #2661A8); /* IE10 */
  background-image: url('/static/images/grey.png'),      -o-linear-gradient(top, #23458E, #2661A8); /* Opera 11.10+ */
  background-image: url('/static/images/grey.png'),         linear-gradient(top, #23458E, #2661A8); /* W3C */

Have a look at this: http://stackoverflow.com/questions/16450039/multiple-backgrounds-on-body/16450098#16450098 — Arbel, May 15 '13 at 19:51

score 3 · Accepted Answer · answered May 15 '13 at 19:48

The image is completely opaque, so since it's specified before the gradient, it covers the gradient.

Both your image and the gradient are completely opaque, so it's not clear what exactly you're trying to accomplish with both of them. An explanation of your problem is the best I can offer at the moment.

Combining a css3 gradient with a background image

1 Answers1