github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frameworks/compass/stylesheets/compass/css3/_background-size.scss
View File

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

2
frameworks/compass/stylesheets/compass/layout/_grid-background.scss
View File

@ -159,6 +159,6 @@ $grid-background-force-fluid : false !default;
get-baseline-gradient($baseline-color), get-baseline-gradient($baseline-color),
get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid) 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; background-position: left top;
} }