How to put url(image) inside -ms-linear-gradient

Question

I was trying to put a background image on my website, and then put a gradient on it, it works well in chrome but not in IE11. i use this style for chrome :

background: linear-gradient(to top, rgb(26 179 148 / .9), #3f9480),url(../img/pattern.jpg);

it should be look like this(chrome) and this for IE11 :

background-image: -ms-linear-gradient(bottom, #1ab394 0%, #3f9480 100% ),url(../img/pattern.jpg);

it looks like this in IE11 but it only shows the gradient, how do I put the URL(img)?

Twak · Answer 1 · 2020-11-10T09:56:17.347

1

Try this out in a new HTML file not directly in your project

Html:

    <div class="tab">
       <div class="gradient"><!--
         Your input fields go here
         -->
       </div>
       <div class="container"></div>

    </div>

CSS:

        .gradient {
        width: 100%;
        position: absolute;
        height: 100px;
        background-image: -ms-linear-gradient(bottom, #1ab394 0%, #3f9480 100%);
        opacity: 0.9;
    }

    .container {
        background-image: url('pattern.jpg');
        width: 100%;
        height: 100px;
    }

This is what it looks like in my IE11

This is the best I can do I hope you like it

edited Nov 10 '20 at 09:56

answered Nov 10 '20 at 09:05

Twak

127
11

1

Hi, I think there's a typo in your answer - 'absolutes'. – A Haworth Nov 10 '20 at 09:51
1

It's work! Thanks for your answer, I try it in a new HTML, I'll modify it to my project. – Pif Nov 10 '20 at 09:59
1

No Problem I am glad to help :) – Twak Nov 10 '20 at 10:00

score 1 · Accepted Answer · answered Nov 10 '20 at 10:24

You can use the same CSS setting for both Chrome and IE11 but need to change the definition of the color that has the transparency.

Use:

background: linear-gradient(to top, rgba(26,179,148, .9), #3f9480),url(gear.jpg);

You don't need the -ms- prefix for IE11 as it deals with linear-gradient now. It just ignored the original transparency setting.

How to put url(image) inside -ms-linear-gradient

2 Answers2