Search code examples
cssbackground-imagebackground-color

CSS background gradient with image overlay

Just a very quick one I'm having a little trouble with - that is, the ordering of background css elements.

I have the following:

background-color: #3C3E89; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#3C3E89, #6265E4); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3C3E89, #6265E4); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3C3E89, #6265E4); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3C3E89, #6265E4); /* Standard syntax */
background-image: url('../images/logo.png');
background-size: cover;

And for some reason the png - although it has the transparency layer - overrides the linear gradients with which I'd like it to sit on.

I've had a little root around to see what the correct method is for this, tried them, with no luck. I was wondering if anyone had a tried and tested method for overlaying a png on top of a gradient background...

I'm sure everyone will scream at me saying this is a duplicated question - but unless I'm missing something I haven't been able to successfully implement their suggestions.

Update:

I have also tried the following:

background-image:
  -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
  -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
  -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
  linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
  url('../images/logo.png');

And...

background:
  -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
  -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
  -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
  linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
  url('../images/logo.png');
Solution

  • You're overriding background by setting background-image. Instead you need to use multiple backgrounds:

    background-image: url('../images/logo.png'), linear-gradient(#3C3E89, #6265E4);

    According to documentation backgrounds are drawn from closest to most distant. So in your case image should came first to be drawn over gradient.