mixin :: bg

bg Mixin(s)

There are several ways to use cross-browser and shorthand of background[-subprop] properties. Here is a list of defined mixins for this case:

Mixin	Usage
bg	Makes the background property shorter
bg-color	Makes the background-color property shorter
bg-size	Shorthand/cross-browser of background-size property
bg-img	Shorthand/cross-browser of background-image property

How to use bg

Parameters

Param	Usage
$val	The value of background property.

Code

For example:

SASS

#myDiv
  +bg($color-light-red)

SCSS

#myDiv{
  @include bg($color-light-red);
}

CSS output

#myDiv{
  background: #ff9a8f;
}

How to use bg-color

Parameters

Param	Usage
$val	The value of background-color property.

Code

For example:

SASS

#myDiv
  +bg-color($color-light-red)

SCSS

#myDiv{
  @include bg-color($color-light-red);
}

CSS output

#myDiv{
  background-color: #ff9a8f;
}

How to use bg-size

Parameters

Param	Usage
$val	The value of background-size property.

Code

For example:

SASS

#myDiv
  +bg-size(1920px 1080px)

SCSS

#myDiv{
  @include bg-size(1920px 1080px);
}

CSS output

#myDiv{
  -webkit-background-size: 1920px 1080px;
  background-size: 1920px 1080px;
}

How to use bg-img

Parameters

Param	Usage
$val	The value of background-image property.

Code

For example:

SASS

#myDiv
  +bg-img(url('path/to/image.jpg'))

SCSS

#myDiv{
  @include bg-img(url('path/to/image.jpg'));
}

CSS output

#myDiv{
  -webkit-background-image: url('path/to/image.jpg');
  -moz-background-image: url('path/to/image.jpg');
  -o-background-image: url('path/to/image.jpg');
  background-image: url('path/to/image.jpg');
}