Images

Generic image styles with a variable background image class plus repeat and position utilities.

Utilities (anchor)

Image utility names and property values
Utility name	Property values
Responsive images
.img	block-size: auto; max-inline-size: 100%
Variable images
.bg-img	background-image: var(--bg-img)
.list-img	list-style-image: var(--list-img)
.border-img	border-image-source: var(--bd-img)
Background image repeat
.bg-no-repeat	background-repeat: no-repeat
.bg-repeat-x	background-repeat: repeat-x
.bg-repeat-y	background-repeat: repeat-y
.bg-space	background-repeat: space
Background image position
.bg-top	background-position: top
.bg-bottom	background-position: bottom
.bg-left	background-position: left
.bg-right	background-position: right
.bg-center	background-position: center
Background image size
.bg-cover	background-size: cover
.bg-contain	background-size: contain
Background image attachment
.bg-scroll	background-attachment: scroll
.bg-fixed	background-attachment: fixed
.bg-local	background-attachment: local
Image rendering
.img-render-auto	image-rendering: auto
.img-render-smooth	image-rendering: smooth
.img-render-crisp	image-rendering: crisp-edges
.img-render-pixelated	image-rendering: pixelated

See the optional aspect-ratio and object-fit utilities for more generic content containment styles that can be used for content design with images and other media.

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

All the utilities can be included individually:

custom.scss

@use "stylemods/scss" as *;
@include responsive-image-css;
@include background-image-css;
@include list-image-css;
@include border-image-css;
@include background-repeat-css;
@include background-position-css;
@include background-size-css;
@include background-attachment-css;
@include image-rendering-css;

Or included with a single mixin:

custom.scss

@use "stylemods/scss" as *;
@include images-css;

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Currently the different image utilities are not configurable individually as with the modules so if enabled all image utilities are included. Enable using overrides or in the in the configuration.scss document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-images: true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

images.scss

// ---------------------------------------------------------- 
// Images
// ----------------------------------------------------------
$background-repeat-values: (
  "no-repeat": no-repeat,
  "repeat-x": repeat-x,
  "repeat-y": repeat-y,
  "space": space,
) !default;

$background-position-values: (
  "top": top,
  "bottom": bottom,
  "left": left,
  "right": right,
  "center": center,
) !default;

$background-size-values: (
  "cover": cover,
  "contain": contain,
) !default;

$background-attachment-values: (
  "scroll": scroll,
  "fixed": fixed,
  "local": local,
) !default;

$image-rendering-values: (
  "auto": auto,
  "smooth": smooth,
  "crisp": crisp-edges,
  "pixelated": pixelated,
) !default;

@mixin responsive-image-css {
  .img {
    block-size: auto;
    max-inline-size: 100%;
  }
}

@mixin background-image-css {
  .bg-img {
    background-image: var(--bg-img);
  }
}

@mixin list-image-css {
  .list-img {
    list-style-image: var(--list-img);
  }
}

@mixin border-image-css {
  .border-img {
    border-image-source: var(--bd-img);
  }
}

@mixin background-repeat-css {
  @each $name, $value in $background-repeat-values {
    .bg-#{$name} {
      background-repeat: $value;        
    }
  }
}

@mixin background-position-css {
  @each $name, $value in $background-position-values {
    .bg-#{$name} {
      background-position: $value;        
    }
  }
}

@mixin background-size-css {
  @each $name, $value in $background-size-values {
    .bg-#{$name} {
      background-size: $value;        
    }
  }
}

@mixin background-attachment-css {
  @each $name, $value in $background-attachment-values {
    .bg-#{$name} {
      background-attachment: $value;        
    }
  }
}

@mixin image-rendering-css {
  @each $name, $value in $image-rendering-values {
    .img-render-#{$name} {
      image-rendering: $value;        
    }
  }
}

// Grouped mixins 
@mixin images-css {
  @include responsive-image-css;
  @include background-image-css;
  @include list-image-css;
  @include border-image-css;
  @include background-repeat-css;
  @include background-position-css;
  @include background-size-css;
  @include background-attachment-css;
  @include image-rendering-css;
}