position background image in ie9 using filter

Question

I have a div with a gradient background as well as a background image. It works great in all the major browsers except ie9. I have both displaying, however I can't figure out how to position the background image.

using the appropriate browser prefix where necessary I use the following:

background: url("../images/green-home-icon.png") no-repeat center top 10px, linear-gradient(top, @top-color 0%,@bottom-color 100%);

But in IE9 I use filter as that is the only css way to do this:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/green-home-icon.png') progid:DXImageTransform.Microsoft.gradient( startColorstr='@{top-color}', endColorstr='@{bottom-color}',GradientType=0);

Is there a way to position the background image in IE9 while keeping the gradient just like we can in other browsers? I would like the image to be centered in the div. I would preferably like to do this without having to add additional elements.

Here is a fiddle. It only has the filter for IE9.

Answer 1

I suggest using an inline SVG instead of the non-standard IE filter. It would look something like this:

background: url("../images/green-home-icon.png") no-repeat center top 10px, url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

JSFiddle: http://jsfiddle.net/Lnqbhag1/

Since it looks like you are using LESS, I have found a LESS mixin that will automate this for you: https://gist.github.com/brysongilbert/3895260. I haven't tested the mixin, but it looks like it should do the trick.