thoughtbot/bourbon — Issue #40: @background-image Converts to gradients when it shouldn't
Author: lynnwallenstein
Created: 2011-12-15 05:09:19+00:00
State: open

I am using the following in my SCSS file to utilize multiple backgrounds; one on the top and one on the bottom...

@include background-image(
url("../images/layout/quote_top.png") center top no-repeat,
url("../images/layout/quote_bottom.png") center bottom no-repeat
);

However the CSS it outputs:

background-image: -webkit-url("../images/layout/quote_top.png")-gradient(center), -webkit-url("../images/layout/quote_bottom.png")-gradient(center);
background-image: -moz-url("../images/layout/quote_top.png")-gradient(center), -moz-url("../images/layout/quote_bottom.png")-gradient(center);
background-image: -ms-url("../images/layout/quote_top.png")-gradient(center), -ms-url("../images/layout/quote_bottom.png")-gradient(center);
background-image: -o-url("../images/layout/quote_top.png")-gradient(center), -o-url("../images/layout/quote_bottom.png")-gradient(center);
background-image: url("../images/layout/quote_top.png")-gradient(center), url("../images/layout/quote_bottom.png")-gradient(center);

Is the short hand not supported? I didn't see mention of it in the docs, so was curious if I needed to add additional CSS (background-position, etc) which sort of seems like it would defeat the purpose.