How to Make Background-Image with Linear-Gradient Work on Ie 11

How to make background-image with linear-gradient work on IE 11?

linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.

Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);

Linear-gradient not working in IE 11

try adding this line to the end of your class:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);

linear gradient not working with image in IE 11?

With the following, the linear gradient should work cross-browser:

background: rgb(255,255,255);
background: -moz-linear-gradient(90deg, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0.7) 70%);
background: -webkit-linear-gradient(90deg, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0.7) 70%);
background: linear-gradient(90deg, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0.7) 70%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);

Also, you should add the image.

Gradient background with text clip for IE11 and safari

Here is clip for background with gradient

 /**

  -webkit-background-clip: text Polyfill

  

  # What? #

  A polyfill which replaces the specified element with a SVG

  in browser where "-webkit-background-clip: text" 

  is not available.

  Fork it on GitHub

  https://github.com/TimPietrusky/background-clip-text-polyfill

  # 2013 by Tim Pietrusky

  # timpietrusky.com

**/

Element.prototype.backgroundClipPolyfill = function () {

  var a = arguments[0],

      d = document,

      b = d.body,

      el = this;

  function hasBackgroundClip() {

    return b.style.webkitBackgroundClip != undefined;

  };

  

  function addAttributes(el, attributes) {

    for (var key in attributes) {

      el.setAttribute(key, attributes[key]);

    }

  }

  

  function createSvgElement(tagname) {

    return d.createElementNS('http://www.w3.org/2000/svg', tagname);

  }

  

  function createSVG() {

    var a = arguments[0],

        svg = createSvgElement('svg'),

        pattern = createSvgElement('pattern'),

        image = createSvgElement('image'),

        text = createSvgElement('text');

    

    // Add attributes to elements

    addAttributes(pattern, {

      'id' : a.id,

      'patternUnits' : 'userSpaceOnUse',

      'width' : a.width,

      'height' : a.height

    });

    

    addAttributes(image, {

      'width' : a.width,

      'height' : a.height

    });

    image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', a.url);

    

    addAttributes(text, {

      'x' : 0,

      'y' : 80,

      'class' : a['class'],

      'style' : 'fill:url(#' + a.id + ');'

    });

    

    // Set text

    text.textContent = a.text;

      

    // Add elements to pattern

    pattern.appendChild(image);

      

    // Add elements to SVG

    svg.appendChild(pattern);

    svg.appendChild(text);

    

    return svg;

  };

  

  /*

   * Replace the element if background-clip

   * is not available.

   */

  if (!hasBackgroundClip()) {

    var img = new Image();

    img.onload = function() {

      var svg = createSVG({

        'id' : a.patternID,

        'url' : a.patternURL,

        'class' : a['class'],

        'width' : this.width,

        'height' : this.height,

        'text' : el.textContent

      });

      

      el.parentNode.replaceChild(svg, el);

    }

    img.src = a.patternURL;

  }

};

var element = document.querySelector('.headline'); 

/*

 * Call the polyfill

 *

 * patternID : the unique ID of the SVG pattern

 * patternURL : the URL to the background-image

 * class : the css-class applied to the SVG

 */

element.backgroundClipPolyfill({

  'patternID' : 'mypattern',

  'patternURL' : 'http://timpietrusky.com/cdn/army.png',

  'class' : 'headline'

});

body {

  font: 1em sans-serif;

  background: #fff;

  margin: 0 1em;

}

h1 {

  color: red;

  -webkit-text-fill-color: transparent;

  background: -webkit-linear-gradient(transparent, transparent), url(http://timpietrusky.com/cdn/army.png) repeat;

  background: -o-linear-gradient(transparent, transparent);

  -webkit-background-clip: text;

}

/*

 * This style will be shared with the SVG because

 * I have to replace the DOM element in Firefox. 

 * Otherwise the SVG pattern will be broken.

 */

.headline {

  font: bold 2.25em sans-serif;

}

svg {

  height: 8em;

  width: 100%;

}

/*

 * Just some styling... ignore it

 */

article {

  font-size: 1.2em;

  border-top: .15em solid #7BB03B;

  height: 100%;

  text-align: center;

}

a {

  text-decoration: none;

  color: #5794C7;

  transition: color .15s ease-in-out;

}

a:hover {

  color: #7BB03B;

}

<h1 class="headline">-webkit-background-clip: text | Polyfill</h1>

<article>

  <p>

    <a href="https://github.com/TimPietrusky/background-clip-text-polyfill" target="_blank">Fork it on GitHub</a>

  </p>

  

  <p>

    2013 by <a href="https://twitter.com/TimPietrusky" target="_blank">@TimPietrusky</a>

  </p>

</article>

---

Related Topics