Backgrounds

Background Repeat

Utilities for sets repetition 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-repeat	background-repeat: repeat
bg-no-repeat	background-repeat: no-repeat
bg-repeat-x	background-repeat: repeat-x
bg-repeat-y	background-repeat: repeat-y
bg-repeat-round	background-repeat: round
bg-repeat-space	background-repeat: space

Usage

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

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

HTML

.dummy {
  @extend
    .bg-repeat,
    .height-48,
    .width-64;
}

SCSS

Set no-repeating background image.

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

HTML

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

SCSS

Set repeating background image horizontally.

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

HTML

.dummy {
  @extend
    .bg-repeat-x,
    .height-48,
    .width-64;
}

SCSS

Set repeating background image vertically.

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

HTML

.dummy {
  @extend
    .bg-repeat-y,
    .height-48,
    .width-64;
}

SCSS

Set repeating resized background image horizontally and vertically.

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

HTML

.dummy {
  @extend
    .bg-repeat-round,
    .height-48,
    .width-64;
}

SCSS

Set repeating no-resized background image horizontally and vertically.

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

HTML

.dummy {
  @extend
    .bg-repeat-space,
    .height-48,
    .width-64;
}

SCSS