Tools Module For CSS Backgrounds.

sircus-tools-background | v1.0.0

background-color

Primary

.t-bgPrimaryDark
.t-bgPrimary
t-bgPrimaryLight
<div class="t-bgPrimaryDark">.t-[sm-|md-|lg-]bgPrimaryDark</div>
<div class="t-bgPrimary">.t-[sm-|md-|lg-]bgPrimary</div>
<div class="t-bgPrimaryLight">.t-[sm-|md-|lg-]bgPrimaryLight</div>

Secondary

.t-bgSecondaryDark
.t-bgSecondary
.t-bgSecondaryLight
<div class="t-bgSecondaryDark">...</div>
<div class="t-bgSecondary">...</div>
<div class="t-bgSecondaryLight">...</div>

Notice

.t-bgNoticeDark
.t-bgNotice
.t-bgNoticeLight
<div class="t-bgNoticeDark">...</div>
<div class="t-bgNotice">...</div>
<div class="t-bgNoticeLight">...</div>

Success

.t-bgSuccessDark
.t-bgSuccess
.t-bgSuccessLight
<div class="t-bgSuccessDark">...</div>
<div class="t-bgSuccess">...</div>
<div class="t-bgSuccessLight">...</div>

Warning

.t-bgWarningDark
.t-bgWarning
.t-bgWarningLight
<div class="t-bgWarningDark">...</div>
<div class="t-bgWarning">...</div>
<div class="t-bgWarningLight">...</div>

Error

.t-bgErrorDark
.t-bgError
.t-bgErrorLight
<div class="t-bgErrorDark">...</div>
<div class="t-bgError">...</div>
<div class="t-bgErrorLight">...</div>

Gray scale

.t-bgBlack
.t-bgGray90
.t-bgGray80
.t-bgGray70
.t-bgGray60
.t-bgGray40
.t-bgGray40
.t-bgGray30
.t-bgGray20
.t-bgGray10
.t-bgGray5
.t-bgWhite
<div class="t-bgBlack">...</div>
<div class="t-bgGray90">...</div>
<div class="t-bgGray80">...</div>
<div class="t-bgGray70">...</div>
<div class="t-bgGray60">...</div>
<div class="t-bgGray50">...</div>
<div class="t-bgGray40">...</div>
<div class="t-bgGray30">...</div>
<div class="t-bgGray20">...</div>
<div class="t-bgGray10">...</div>
<div class="t-bgGray5">...</div>
<div class="t-bgWhite">...</div>

background-repeat

no-repeat

<div class="t-bgNoRepeat" style="background-image: url('IMAGE_PATH');"></div>

background-attachment

fixed

<div class="t-bgFixed" style="background-image: url('IMAGE_PATH');"></div>

background-size

cover

<div class="t-bgCover" style="background-image: url('IMAGE_PATH');"></div>

Contain

<div class="t-bgContain" style="background-image: url('IMAGE_PATH');"></div>

background-position

left

background-position: left top

<div class="t-bgLeftTop" style="background-image: url('IMAGE_PATH');"></div>

background-position: left center

<div class="t-bgLeft" style="background-image: url('IMAGE_PATH');"></div>

background-position: left bottom

<div class="t-bgLeftBottom" style="background-image: url('IMAGE_PATH');"></div>

center

background-position: center top

<div class="t-bgCenterTop" style="background-image: url('IMAGE_PATH');"></div>

background-position: center center

<div class="t-bgCenter" style="background-image: url('IMAGE_PATH');"></div>

background-position: center bottom

<div class="t-bgCenterBottom" style="background-image: url('IMAGE_PATH');"></div>

right

background-position: right top

<div class="t-bgRightTop" style="background-image: url('IMAGE_PATH');"></div>

background-position: right center

<div class="t-bgRight" style="background-image: url('IMAGE_PATH');"></div>

background-position: right bottom

<div class="t-bgRightBottom" style="background-image: url('IMAGE_PATH');"></div>

Install

npm install sircus-tools-background sircus-variables

CSS import

@import "sircus-tools-background";
@import "sircus-tools-background/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-backgrounds
 ================================================== */
.t-bgWhite { background-color: #fff !important; }
.t-bgBlack { background-color: #000 !important; }
.t-bgGray90 { background-color: var(--gray-90) !important; }
.t-bgGray80 { background-color: var(--gray-80) !important; }
.t-bgGray70 { background-color: var(--gray-70) !important; }
.t-bgGray60 { background-color: var(--gray-60) !important; }
.t-bgGray50 { background-color: var(--gray-50) !important; }
.t-bgGray40 { background-color: var(--gray-40) !important; }
.t-bgGray30 { background-color: var(--gray-30) !important; }
.t-bgGray20 { background-color: var(--gray-20) !important; }
.t-bgGray10 { background-color: var(--gray-10) !important; }
.t-bgGray5 { background-color: var(--gray-5) !important; }

.t-bgPrimary      { background-color: var(--primary) !important; }
.t-bgPrimaryDark  { background-color: var(--primary-dark) !important; }
.t-bgPrimaryLight { background-color: var(--primary-light) !important; }

.t-bgSecondary      { background-color: var(--secondary) !important; }
.t-bgSecondaryDark  { background-color: var(--secondary-dark) !important; }
.t-bgSecondaryLight { background-color: var(--secondary-light) !important; }

.t-bgSuccess      { background-color: var(--success) !important; }
.t-bgSuccessDark  { background-color: var(--success-dark) !important; }
.t-bgSuccessLight { background-color: var(--success-light) !important; }

.t-bgNotice      { background-color: var(--notice) !important; }
.t-bgNoticeDark  { background-color: var(--notice-dark) !important; }
.t-bgNoticeLight { background-color: var(--notice-light) !important; }

.t-bgWarning      { background-color: var(--warning) !important; }
.t-bgWarningDark  { background-color: var(--warning-dark) !important; }
.t-bgWarningLight { background-color: var(--warning-light) !important; }

.t-bgError      { background-color: var(--error) !important; }
.t-bgErrorDark  { background-color: var(--error-dark) !important; }
.t-bgErrorLight { background-color: var(--error-light) !important; }

.t-bgCover   { background-size: cover !important; }
.t-bgContain { background-size: contain !important; }

.t-bgCenter       { background-position: center center !important; }
.t-bgCenterTop    { background-position: center top !important; }
.t-bgCenterBottom { background-position: center bottom !important; }

.t-bgLeft       { background-position: left center !important; }
.t-bgLeftTop    { background-position: left top !important; }
.t-bgLeftBottom { background-position: left bottom !important; }

.t-bgRight       { background-position: right center !important; }
.t-bgRightTop    { background-position: right top !important; }
.t-bgRightBottom { background-position: right bottom !important; }

.t-bgFixed { background-attachment: fixed !important; }

.t-bgNoRepeat { background-repeat: no-repeat !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-bgWhite { background-color: #fff !important; }
  .t-sm-bgBlack { background-color: #000 !important; }
  .t-sm-bgGray90 { background-color: var(--gray-90) !important; }
  .t-sm-bgGray80 { background-color: var(--gray-80) !important; }
  .t-sm-bgGray70 { background-color: var(--gray-70) !important; }
  .t-sm-bgGray60 { background-color: var(--gray-60) !important; }
  .t-sm-bgGray50 { background-color: var(--gray-50) !important; }
  .t-sm-bgGray40 { background-color: var(--gray-40) !important; }
  .t-sm-bgGray30 { background-color: var(--gray-30) !important; }
  .t-sm-bgGray20 { background-color: var(--gray-20) !important; }
  .t-sm-bgGray10 { background-color: var(--gray-10) !important; }
  .t-sm-bgGray5 { background-color: var(--gray-5) !important; }

  .t-sm-bgPrimary      { background-color: var(--primary) !important; }
  .t-sm-bgPrimaryDark  { background-color: var(--primary-dark) !important; }
  .t-sm-bgPrimaryLight { background-color: var(--primary-light) !important; }

  .t-sm-bgSecondary      { background-color: var(--secondary) !important; }
  .t-sm-bgSecondaryDark  { background-color: var(--secondary-dark) !important; }
  .t-sm-bgSecondaryLight { background-color: var(--secondary-light) !important; }

  .t-sm-bgSuccess      { background-color: var(--success) !important; }
  .t-sm-bgSuccessDark  { background-color: var(--success-dark) !important; }
  .t-sm-bgSuccessLight { background-color: var(--success-light) !important; }

  .t-sm-bgNotice      { background-color: var(--notice) !important; }
  .t-sm-bgNoticeDark  { background-color: var(--notice-dark) !important; }
  .t-sm-bgNoticeLight { background-color: var(--notice-light) !important; }

  .t-sm-bgWarning      { background-color: var(--warning) !important; }
  .t-sm-bgWarningDark  { background-color: var(--warning-dark) !important; }
  .t-sm-bgWarningLight { background-color: var(--warning-light) !important; }

  .t-sm-bgError      { background-color: var(--error) !important; }
  .t-sm-bgErrorDark  { background-color: var(--error-dark) !important; }
  .t-sm-bgErrorLight { background-color: var(--error-light) !important; }

  .t-sm-bgCover   { background-size: cover !important; }
  .t-sm-bgContain { background-size: contain !important; }

  .t-sm-bgCenter       { background-position: center center !important; }
  .t-sm-bgCenterTop    { background-position: center top !important; }
  .t-sm-bgCenterBottom { background-position: center bottom !important; }

  .t-sm-bgLeft       { background-position: left center !important; }
  .t-sm-bgLeftTop    { background-position: left top !important; }
  .t-sm-bgLeftBottom { background-position: left bottom !important; }

  .t-sm-bgRight       { background-position: right center !important; }
  .t-sm-bgRightTop    { background-position: right top !important; }
  .t-sm-bgRightBottom { background-position: right bottom !important; }

  .t-sm-bgFixed { background-attachment: fixed !important; }

  .t-sm-bgNoRepeat { background-repeat: no-repeat !important; }
}

@media (--viewport-md) {
  .t-md-bgWhite { background-color: #fff !important; }
  .t-md-bgBlack { background-color: #000 !important; }
  .t-md-bgGray90 { background-color: var(--gray-90) !important; }
  .t-md-bgGray80 { background-color: var(--gray-80) !important; }
  .t-md-bgGray70 { background-color: var(--gray-70) !important; }
  .t-md-bgGray60 { background-color: var(--gray-60) !important; }
  .t-md-bgGray50 { background-color: var(--gray-50) !important; }
  .t-md-bgGray40 { background-color: var(--gray-40) !important; }
  .t-md-bgGray30 { background-color: var(--gray-30) !important; }
  .t-md-bgGray20 { background-color: var(--gray-20) !important; }
  .t-md-bgGray10 { background-color: var(--gray-10) !important; }
  .t-md-bgGray5 { background-color: var(--gray-5) !important; }

  .t-md-bgPrimary      { background-color: var(--primary) !important; }
  .t-md-bgPrimaryDark  { background-color: var(--primary-dark) !important; }
  .t-md-bgPrimaryLight { background-color: var(--primary-light) !important; }

  .t-md-bgSecondary      { background-color: var(--secondary) !important; }
  .t-md-bgSecondaryDark  { background-color: var(--secondary-dark) !important; }
  .t-md-bgSecondaryLight { background-color: var(--secondary-light) !important; }

  .t-md-bgSuccess      { background-color: var(--success) !important; }
  .t-md-bgSuccessDark  { background-color: var(--success-dark) !important; }
  .t-md-bgSuccessLight { background-color: var(--success-light) !important; }

  .t-md-bgNotice      { background-color: var(--notice) !important; }
  .t-md-bgNoticeDark  { background-color: var(--notice-dark) !important; }
  .t-md-bgNoticeLight { background-color: var(--notice-light) !important; }

  .t-md-bgWarning      { background-color: var(--warning) !important; }
  .t-md-bgWarningDark  { background-color: var(--warning-dark) !important; }
  .t-md-bgWarningLight { background-color: var(--warning-light) !important; }

  .t-md-bgError      { background-color: var(--error) !important; }
  .t-md-bgErrorDark  { background-color: var(--error-dark) !important; }
  .t-md-bgErrorLight { background-color: var(--error-light) !important; }

  .t-md-bgCover   { background-size: cover !important; }
  .t-md-bgContain { background-size: contain !important; }

  .t-md-bgCenter       { background-position: center center !important; }
  .t-md-bgCenterTop    { background-position: center top !important; }
  .t-md-bgCenterBottom { background-position: center bottom !important; }

  .t-md-bgLeft       { background-position: left center !important; }
  .t-md-bgLeftTop    { background-position: left top !important; }
  .t-md-bgLeftBottom { background-position: left bottom !important; }

  .t-md-bgRight       { background-position: right center !important; }
  .t-md-bgRightTop    { background-position: right top !important; }
  .t-md-bgRightBottom { background-position: right bottom !important; }

  .t-md-bgFixed { background-attachment: fixed !important; }

  .t-md-bgNoRepeat { background-repeat: no-repeat !important; }
}

@media (--viewport-lg) {
  .t-lg-bgWhite { background-color: #fff !important; }
  .t-lg-bgBlack { background-color: #000 !important; }
  .t-lg-bgGray90 { background-color: var(--gray-90) !important; }
  .t-lg-bgGray80 { background-color: var(--gray-80) !important; }
  .t-lg-bgGray70 { background-color: var(--gray-70) !important; }
  .t-lg-bgGray60 { background-color: var(--gray-60) !important; }
  .t-lg-bgGray50 { background-color: var(--gray-50) !important; }
  .t-lg-bgGray40 { background-color: var(--gray-40) !important; }
  .t-lg-bgGray30 { background-color: var(--gray-30) !important; }
  .t-lg-bgGray20 { background-color: var(--gray-20) !important; }
  .t-lg-bgGray10 { background-color: var(--gray-10) !important; }
  .t-lg-bgGray5 { background-color: var(--gray-5) !important; }

  .t-lg-bgPrimary      { background-color: var(--primary) !important; }
  .t-lg-bgPrimaryDark  { background-color: var(--primary-dark) !important; }
  .t-lg-bgPrimaryLight { background-color: var(--primary-light) !important; }

  .t-lg-bgSecondary      { background-color: var(--secondary) !important; }
  .t-lg-bgSecondaryDark  { background-color: var(--secondary-dark) !important; }
  .t-lg-bgSecondaryLight { background-color: var(--secondary-light) !important; }

  .t-lg-bgSuccess      { background-color: var(--success) !important; }
  .t-lg-bgSuccessDark  { background-color: var(--success-dark) !important; }
  .t-lg-bgSuccessLight { background-color: var(--success-light) !important; }

  .t-lg-bgNotice      { background-color: var(--notice) !important; }
  .t-lg-bgNoticeDark  { background-color: var(--notice-dark) !important; }
  .t-lg-bgNoticeLight { background-color: var(--notice-light) !important; }

  .t-lg-bgWarning      { background-color: var(--warning) !important; }
  .t-lg-bgWarningDark  { background-color: var(--warning-dark) !important; }
  .t-lg-bgWarningLight { background-color: var(--warning-light) !important; }

  .t-lg-bgError      { background-color: var(--error) !important; }
  .t-lg-bgErrorDark  { background-color: var(--error-dark) !important; }
  .t-lg-bgErrorLight { background-color: var(--error-light) !important; }

  .t-lg-bgCover   { background-size: cover !important; }
  .t-lg-bgContain { background-size: contain !important; }

  .t-lg-bgCenter       { background-position: center center !important; }
  .t-lg-bgCenterTop    { background-position: center top !important; }
  .t-lg-bgCenterBottom { background-position: center bottom !important; }

  .t-lg-bgLeft       { background-position: left center !important; }
  .t-lg-bgLeftTop    { background-position: left top !important; }
  .t-lg-bgLeftBottom { background-position: left bottom !important; }

  .t-lg-bgRight       { background-position: right center !important; }
  .t-lg-bgRightTop    { background-position: right top !important; }
  .t-lg-bgRightBottom { background-position: right bottom !important; }

  .t-lg-bgFixed { background-attachment: fixed !important; }

  .t-lg-bgNoRepeat { background-repeat: no-repeat !important; }
}