Mixing calc() and linear-gradient in multiple background not working in ie9

Question

I want to reduce the usage of unnecessary div so I'm using multiple-background. But in ie9 it doesn't seems to work.

background: url(../images/home-2000.jpg) no-repeat -webkit-calc(50% - 200px) top, -webkit-linear-gradient(0deg, #dfe2e7 50%, white 50%);
background: url(../images/home-2000.jpg) no-repeat calc(50% - 200px) top, linear-gradient(90deg, #dfe2e7 50%, white 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfe2e7', endColorstr='#ffffff',GradientType=1 );
-webkit-background-size: auto 100%;
background-size: auto 100%;

Answer 1

IE9 doesn't support CSS gradients: http://caniuse.com/#feat=css-gradients

You can use this tool to add IE9 gradient support: http://www.colorzilla.com/gradient-editor/ It creates an svg image that allows you to embed in the css.