How to use Compass background-with-css2-fallback mixin?

Question

How to use Compass background-with-css2-fallback mixin with backup?

I specifically want to set the default background color for older versions of IE.

Here's what I'm trying now, but IE8 and below doesn't seem to recognize it:

div { background: #0E1B31; @include background-with-css2-fallback(linear-gradient(top, #0E1B31, #0A1322)); } 

Answer 1

The purpose of background-with-css2-fallback is to save you from writing the background: #0E1B31; line background: #0E1B31; . You would use it as follows:

 div { @include background-with-css2-fallback(linear-gradient(top, #0E1B31, #0A1322), #0E1B31); } 

What you get is:

 div { background: #0e1b31; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0e1b31), color-stop(100%, #0a1322)), #0e1b31; background: -webkit-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; background: -moz-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; background: -o-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; background: -ms-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; background: linear-gradient(top, #0e1b31, #0a1322), #0e1b31; } 

I think you really just want:

 div { background: #0E1B31; @include background(linear-gradient(top, #0E1B31, #0A1322)); } 

The same will work, be more readable and output less code. You can change the include to background-image if you want the color to stay behind the gradient in new browsers.