Source on Github

Compass Background Size

This mixin provides cross browser access to the CSS3 background-size attribute using supported vendor prefixes. See CSS3 spec: background-size.

This file can be imported using: @import "compass/css3/background-size"

Examples

Background Size
See background-size in action.

Imports

  1. Shared Utilities

Configurable Variables help

100% auto

override to change the default

Mixins

view source 

=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)
  +experimental(background-size, $sizes, -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);
}

Set the size of background images using px, width and height, or percentages. Currently supported in: Opera, Gecko, Webkit.