Images

Image utilities 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

Also see aspect-ratio and object-fit layout utilities.

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.

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.

Source code (anchor)

The Images source file is included with the utilities module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document: stylemods/scss/utilities/images.scss
View on Github: https://github.com/pmbrown/StyleMods/blob/main/scss/utilities/images.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.