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
- Browser Support – Provides configuration options for the Compass Browser Support Matrix.
Configurable Variables help
$background-size-threshold
$critical-usage-threshold
The the user threshold for background-clip support. Defaults to $critical-usage-threshold
$default-background-size
100% auto
override to change the default
Mixins
view sourcebackground-size
=background-size($size...) $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