Backgrounds

Background Position

Utilities for sets position of a background image.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
bg-top	background-position: top
bg-bottom	background-position: bottom
bg-center	background-position: center
bg-left	background-position: left
bg-left-bottom	background-position: left bottom
bg-left-top	background-position: left top
bg-right	background-position: right
bg-right-bottom	background-position: right bottom
bg-right-top	background-position: right top

Usage

Set left-top position background image with HTML inline attribute style="..." and a CSS property background-image: url(...) to an element.

<div class="bg-left-top ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-left-top,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set top position background image.

<div class="bg-top ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-top,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set right-top position background image.

<div class="bg-right-top ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-right-top,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set right position background image.

<div class="bg-right ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-right,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set right bottom position background image.

<div class="bg-right-bottom ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-right-bottom,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set bottom position background image.

<div class="bg-bottom ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-bottom,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set left-bottom position background image.

<div class="bg-left-bottom ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-left-bottom,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set left position background image.

<div class="bg-left ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-left,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS

Set center position background image.

<div class="bg-center ... bg-no-repeat ... height-32 width-64" style="background-image:url(...)">
  ...
</div>

HTML

.dummy {
  @extend
    .bg-center,
    .bg-no-repeat,
    .height-32,
    .width-64;
}

SCSS