Backgrounds

Background Size

Utilities for sets background size 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-auto	background-size: auto
bg-cover	background-size: cover
bg-contain	background-size: contain

Usage

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

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

HTML

.dummy {
  @extend
    .bg-auto,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set cropped and stretched background image to an element.

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

HTML

.dummy {
  @extend
    .bg-cover,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS

Set background image contains an element with cropped and stretched.

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

HTML

.dummy {
  @extend
    .bg-contain,
    .bg-center,
    .bg-no-repeat,
    .height-48,
    .width-full;
}

SCSS