Compass Background Origin

Provides a mixin for the background origin property. See CSS3 spec: background-origin property.

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

Examples

Background Origin: See background-origin in action.

Imports

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

Configurable Variables help

$background-origin-threshold `$critical-usage-threshold`

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

$default-background-origin `content-box`

The default background-origin: [border-box | padding-box | content-box]

Mixins

view source

background-origin

=background-origin($origin...)
  $output: ()
  $deprecated: ()
  @if length($origin) > 0
    @each $layer in $origin
      $output: append($output, unquote($layer), comma)
      $deprecated: append($deprecated, legacy-box($layer), comma)
  @else
    $output: $default-background-origin
    $deprecated: legacy-box($default-background-origin)
  +with-each-prefix(background-img-opts, $background-origin-threshold)
    @if $current-prefix == -moz or $current-prefix == -webkit
      // Legacy versions of Mozilla support a different syntax, prefixed.
      +prefix-prop(background-origin, $deprecated)
    @else
      +prefix-prop(background-origin, $output)

@mixin background-origin($origin...) {
  $output: ();
  $deprecated: ();
  @if length($origin) > 0 {
    @each $layer in $origin {
      $output: append($output, unquote($layer), comma);
      $deprecated: append($deprecated, legacy-box($layer), comma);
    }
  }
  @else {
    $output: $default-background-origin;
    $deprecated: legacy-box($default-background-origin);
  }
  @include with-each-prefix(background-img-opts, $background-origin-threshold) {
    @if $current-prefix == -moz or $current-prefix == -webkit {
      // Legacy versions of Mozilla support a different syntax, prefixed.
      @include prefix-prop(background-origin, $deprecated);
    }
    @else {
      @include prefix-prop(background-origin, $output);
    }
  }
}

Set the origin of the background (image and color) at the edge of the padding, border, or content.

$origin... : [padding-box | border-box | content-box]