Background pattern

Syntax

Class
Properties
bg-checker-{size}-{...color}
background-image: url("data:image/svg+xml,{...}");

Parameters

size
<length-percentage unsigned default-unit=1px>

Checkerboard pattern size including 2 light and 2 dark squares.

...color
<...color>

Use to emphasize that an image or color is semi- or fully transparent.

<div class="t1 w-320 p-16 bg-c-white shadow-4-60"> <div class="t1 bg-c-gray-100 bg-checker-16-gray-150 flex flex-center w-full h-128 shadow-4-60-inset"> <svg class="t1 w-80 h-80 stroke-c-gray-800 stroke-4" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 17L17 3M3 3l14 14" stroke-linecap="round"/></svg> </div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Checkerboard size provided as unitless number.
t1 bg-checker-16-black-6
.t1.bg-checker-16-black-6 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='%230000000F'/%3E%3C/svg%3E"); }
Checkerboard size provided as length.
t1 bg-checker-16px-black-6
.t1.bg-checker-16px-black-6 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='%230000000F'/%3E%3C/svg%3E"); }
Checkerboard color provided by name, shade, opacity.
t1 bg-checker-16-blue-500-50
.t1.bg-checker-16-blue-500-50 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='%2312A4E280'/%3E%3C/svg%3E"); }
Checkerboard color provided by HEX color value in lowercase format.
t1 bg-checker-16-hex-abcdef
.t1.bg-checker-16-hex-abcdef { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='%23ABCDEF'/%3E%3C/svg%3E"); }
Checkerboard color provided by HEX color value in uppercase format.
t1 bg-checker-16-hex-ABCDEF
.t1.bg-checker-16-hex-ABCDEF { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='%23ABCDEF'/%3E%3C/svg%3E"); }
Checkerboard color provided by HEX color value with alpha channel.
t1 bg-checker-16-hex-12345678
.t1.bg-checker-16-hex-12345678 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='%2312345678'/%3E%3C/svg%3E"); }
Checkerboard color provided by rgb color value.
t1 bg-checker-16-rgb-12-34-56
.t1.bg-checker-16-rgb-12-34-56 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='rgb(12, 34, 56)'/%3E%3C/svg%3E"); }
Checkerboard color provided by rgba color value.
t1 bg-checker-16-rgb-12-34-56-78
.t1.bg-checker-16-rgb-12-34-56-78 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='rgba(12, 34, 56, 78%)'/%3E%3C/svg%3E"); }
Checkerboard color provided by hsl color value.
t1 bg-checker-16-hsl-10-20-30
.t1.bg-checker-16-hsl-10-20-30 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='hsl(10deg, 20%, 30%)'/%3E%3C/svg%3E"); }
Checkerboard color provided by hsla color value.
t1 bg-checker-16-hsl-10-20-30-40
.t1.bg-checker-16-hsl-10-20-30-40 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 2 2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z' fill='hsla(10deg, 20%, 30%, 40%)'/%3E%3C/svg%3E"); }