The background-size property accepts multiple sizes corresponding to each background.

This commit is contained in:
Chris Eppstein 2011-04-15 23:39:46 -07:00
parent 72434be137
commit 0a33bc14b2
2 changed files with 16 additions and 6 deletions

View File

@ -8,9 +8,19 @@ $default-background-size: 100% auto !default;
//
// * percentages are relative to the background-origin (default = padding-box)
// * mixin defaults to: `$default-background-size`
@mixin background-size($size: $default-background-size) {
@if type-of($size) == string {
$size: unquote($size);
}
@include experimental(background-size, $size, -moz, -webkit, -o, not -ms, not -khtml);
@mixin background-size(
$size-1: $default-background-size,
$size-2: false,
$size-3: false,
$size-4: false,
$size-5: false,
$size-6: false,
$size-7: false,
$size-8: false,
$size-9: false,
$size-10: false
) {
$size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
$sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);
@include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml);
}

View File

@ -159,6 +159,6 @@ $grid-background-force-fluid : false !default;
get-baseline-gradient($baseline-color),
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
);
@include background-size((100% #{$baseline}, auto));
@include background-size(100% $baseline, auto);
background-position: left top;
}