Source on Github

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

  1. Shared Utilities

Configurable Variables help

content-box

Mixins

view source 

=background-origin($origin: $default-background-origin)
  $origin: unquote($origin)
  // webkit and mozilla use the deprecated short [border | padding | content]
  $deprecated: $origin
  @if $origin == padding-box
    $deprecated: padding
  @if $origin == border-box
    $deprecated: border
  @if $origin == content-box
    $deprecated: content
  // Support for webkit and mozilla's use of the deprecated short form
  +experimental(background-origin, $deprecated, -moz, -webkit, not -o, not -ms, not -khtml, not official)
  +experimental(background-origin, $origin, not -moz, not -webkit, -o, -ms, -khtml, official)

@mixin background-origin($origin: $default-background-origin) {
  $origin: unquote($origin);
  // webkit and mozilla use the deprecated short [border | padding | content]
  $deprecated: $origin;
  @if $origin == padding-box {
    $deprecated: padding;
  }
  @if $origin == border-box {
    $deprecated: border;
  }
  @if $origin == content-box {
    $deprecated: content;
  }
  // Support for webkit and mozilla's use of the deprecated short form
  @include experimental(background-origin, $deprecated, -moz, -webkit, not -o, not -ms, not -khtml, not official);
  @include experimental(background-origin, $origin, not -moz, not -webkit, -o, -ms, -khtml, official);
}

Position the background off the edge of the padding, border or content