How do I use the Compass background-with-css2-fallback mixin?

Question

How do I use the Compass background-with-css2-fallback mixin with a fallback?

I'm specifically wanting to be able to set a default background color for older versions of IE.

Here's what I'm currently trying, but IE8 and below don'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. You would use it like this:

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

What you will get is this:

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));
}

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