0

I'm trying to find a cross-browser solution which allows two background images - a linear gradient which is to be overlaid over a background image.

Specifically this needs to work in Internet Explorer 11.

I'm using inline styling on this occasion - currently I have:

<div id="the_big_picture" class="row section second_section" style="background-image: linear-gradient(180deg,#ffffff00 80%,#fffffffc 90%), url('img/the_big_picture_bg.jpg')"></div>

The above works fine in Chrome, Firefox and Safari but IE11 doesn't want to play ball.

Thanks in advance.

jonhendrix
  • 366
  • 2
  • 15
  • Possible duplicate of https://stackoverflow.com/questions/19980079/how-to-make-background-image-with-linear-gradient-work-on-ie-11?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Nandita Sharma May 24 '18 at 17:21
  • @NanditaAroraSharma yes I did read that post - however, I have tried the same code out and it does not work in my case! The code in that example is in the reverse order, and when reversed to fit my use case, it does not produce the required result... – jonhendrix May 24 '18 at 17:26

1 Answers1

0

Try to use other colors. This one works

linear-gradient(180deg, transparent 80%, #fff 90%), url('img/the_big_picture_bg.png')

Herman
  • 43
  • 8