CSS background gradient with image overlay

Question

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');

Have you tried this? https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element — Cons7an7ine, Oct 29 '17 at 15:03

Flying · Accepted Answer · 2017-10-29T15:18:56.007

9

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.

edited Oct 29 '17 at 15:18

answered Oct 29 '17 at 14:54

Flying

4,422
2
17
25

Hmmm, not just saying this but I have tried this...all I see is the linear gradient? No image... – Oct 29 '17 at 14:59
Sorry, image should came first – Flying Oct 29 '17 at 15:04
Got it. I also had to remove compatibility for various browsers... anyway I can keep this in? – Oct 29 '17 at 15:11
@Flying i suggest you to add a small line to specify the importance of the order so you answer is more complete ;) – Temani Afif Oct 29 '17 at 15:13
Added explanation with link to MDN documentation – Flying Oct 29 '17 at 15:19

Temani Afif · Answer 2 · 2017-10-29T15:11:08.907

linear gradiant is behaving like background-image as you can use this syntax also :

.content {
  background-image: linear-gradient(#3C3E89, #6265E4);
  height:200px;
}

<div class="content">
</div>

That's why your CSS rules of background-image is overriding it. Instead you need to specify multiple background like this :

.content {
  height: 200px;
  background: linear-gradient(#3C3E89, rgba(98, 101, 228, 0.21)), url(https://lorempixel.com/200/100/);
}

<div class="content">
</div>

You should pay attention to order. In my example gradient is above the image because it comes first and i added some opacity to be able to see the image. If you use solid color and/or image without transaparency you will only see the first background.

CSS background gradient with image overlay

2 Answers2