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)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin as demonstrated 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;

Source code (anchor)

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;
}