Version: 1.0.1
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"


Background Size
See background-size in action.


  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help


The the user threshold for background-clip support. Defaults to $critical-usage-threshold

100% auto

override to change the default


view source

  $size: set-arglist-default($size, $default-background-size)
  +prefixed-properties(background-img-opts, $background-size-threshold, (background-size: $size))
@mixin background-size($size...) {
  $size: set-arglist-default($size, $default-background-size);
  @include prefixed-properties(background-img-opts, $background-size-threshold, (background-size: $size));

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

  • percentages are relative to the background-origin (default = padding-box)
  • mixin defaults to: $default-background-size