background-image などのプロパティでイメージを指定します。

使用例を下記に示します。

background-image: url(image/back.png);
background-image: linear-gradient(to right, yellow, red);

画像ファイルのURLを指定します。

.t1 {
  width: 20rem;
  height: 5rem;
  border: 1px solid #999;
  background-image: url(img/back.png);
}

<div class="t1">背景画像</div>

線形グラデーションを指定します。

第一引数はグラデーションの方向を角度または to 方向で指定します。省略した場合は to bottom と見なされます。

linear-gradient(to right, yellow, red);         /* (左から)右方向に */
linear-gradient(to bottom right, yellow, red);  /* (右上から)右下方向に */
linear-gradient(45deg, yellow, red);            /* 45度の方向に */
linear-gradient(yellow, red);                   /* 省略時は to bottm と同じ */

第二引数以降には2個以上の色を指定できます。

linear-gradient(to right, yellow, red);               /* 黄 → 赤 */
linear-gradient(to right, yellow, red, green);        /* 黄 → 赤 → 緑 */
linear-gradient(to right, yellow, red, green, blue);  /* 黄 → 赤 → 緑 → 青 */

色の後に長さやパーセンテージを記述すると、開始から終了方向にその長さまたはパーセント分進んだ箇所でその色がはじまります。

linear-gradient(to right, yellow 0%, red 10%, green 20%, blue 30%);

最後の色以外には終了点を指定することができます。下記の例では 0～10% が黄色、10～20% が赤、20～30% が緑、40% 以降が青となります。30～40% は緑と青のグラデーションとなります。仕様書では開始点と終了点の間にカンマ(,)が必要っぽい(?)のですが、MDN ではカンマ無しで説明されています。カンマ有り/無しどちらでも動作はするようです。

linear-gradient(to right, yellow 0%, 10%, red 10%, 20%, green 20%, 30%, blue 40%);
linear-gradient(to right, yellow 0%  10%, red 10%  20%, green 20%  30%, blue 40%);

繰り返し線形グラデーションを指定します。引数は linear-gradient() と同じで、指定した色が領域いっぱいまで繰り返されます。

repeating-linear-gradient(to right, yellow 0%, red 10%, green 20%, blue 30%);

放射線状にグラデーションをかけます。下記の様に指定すると中央から放射線状に指定した色順にグラデーションをかけます。

radial-gradient(yellow, red, green, blue);

円形・楕円を指定することができます。

radial-gradient(circle, yellow, red, green, blue);             /* 円形 */
radial-gradient(circle 2rem, yellow, red, green, blue);        /* 円形(半径2rem) */
radial-gradient(ellipse 2rem 1rem, yellow, red, green, blue);  /* 楕円(横半径2rem/縦半径1rem) */
radial-gradient(ellipse 40% 20%, yellow, red, green, blue);    /* 楕円(横半径40%/縦半径20%) */

長さを示すキーワードとして下記を使用できます。

radial-gradient(circle closest-corner, yellow, red, green, blue);   /* 最も近い角までの距離 */
radial-gradient(circle closest-side, yellow, red, green, blue);     /* 最も近い辺までの距離 */
radial-gradient(circle farthest-corner, yellow, red, green, blue);  /* 最も遠い角までの距離 */
radial-gradient(circle farthest-side, yellow, red, green, blue);    /* 最も遠い辺までの距離 */

at <position> で中心位置を指定することができます。

radial-gradient(circle at right top, yellow, red, green, blue);   /* 右上 */
radial-gradient(circle at 2rem 1rem, yellow, red, green, blue);   /* 左から2rem/上から1rem */

linear-gradient() と同様に開始点、終了点を指定することができます。

radial-gradient(circle, yellow 10%, red 20%, green 30%, blue 40%);             /* 開始点 */
radial-gradient(circle, yellow 0% 10%, red 10% 20%, green 20% 30%, blue 30%);  /* 開始点 終了点 */

繰り返し線形グラデーションを指定します。引数は radial-gradient() と同じで、指定した色が領域いっぱいまで繰り返されます。

repeating-radial-gradient(yellow 0%, red 10%, green 20%, blue 30%);

円錐形のグラデーションをかけます。

conic-gradient(yellow, red, green, blue);

from で開始角度を指定することができます。

conic-gradient(from 90deg, yellow, red, green, blue);

at で中心点を指定することができます。

conic-gradient(at 30% 30%, yellow, red, green, blue);

色の後に角度やパーセンテージを記述すると、開始から終了方向にその角度またはパーセント分進んだ箇所でその色がはじまります。

conic-gradient(yellow, red 10%, green 20%, blue 30%);

終了位置を指定することもできます。下記の例では 0～10% を黄色、10～20% を赤、20～30% を緑、40%～ を青で描画します。30～40% の間は緑と青のグラデーションとなります。

conic-gradient(yellow 0% 10%, red 10% 20%, green 20% 30%, blue 40%);

繰り返し円錐形グラデーションを指定します。引数は conic-gradient() と同じで、指定した色が領域いっぱいまで繰り返されます。

repeating-conic-gradient(yellow 0%, red 5%, green 10%, blue 15%);

複数の画像を重ね合わせます。正式仕様は 形式1 ですが、Chrome, Edge, Opera では -webkit- 接頭辞付きで古い仕様(形式2)をサポートしています。

-webkit-cross-fade(url(./img/image1.png), url(./img/image2.png), 50%);

画像形式や解像度の異なる画像の中からブラウザに適した画像を表示します。

下記の例ではブラウザの解像度に応じて低解像度の sample_1x.jpg または高解像度の sample_2x.jpg が適切に選択されます。image-set() 未サポートブラウザのために -webkit-image-set() や url() を指定しています。

.box {
  background-image: url(./image/sample_1x.jpg);
  background-image: -webkit-image-set(
    url(./image/sample_1x.jpg) 1x,
    url(./image/sample_2x.jpg) 2x
  );
  background-image: image-set(
    url(./image/sample_1x.jpg) 1x,
    url(./image/sample_2x.jpg) 2x
  );
}

下記の例ではブラウザが AVIF形式をサポートしていれば AVIF形式を、さもなくば JPEG形式の画像を表示します。

.box {
  background-image: url(./image/sample.jpg);
  background-image: -webkit-image-set(
    url(./image/sample.avif) type("image/avid"),
    url(./image/sample.jpg) type("image/jpeg")
  );
  background-image: image-set(
    url(./image/sample.avif) type("image/avid"),
    url(./image/sample.jpg) type("image/jpeg")
  );
}

画像を JavaScript で描画することができます。canvas 以外の要素の背景を JavaScript で描画したい場合に有用です。

描画メソッドを持つクラスを記述した JavaScript ファイルを用意し、CSS.paintWorklet.addModule() で読み込む必要があります。CORS 制限によりローカルファイルを読み込むことはできません。JavaScript は Canvas 2Dリファレンス を参照してください。

<script>
if ("paintWorklet" in CSS) {
  CSS.paintWorklet.addModule('example.js');
}
</script>
<style>
.paint-example {
  width: 300px;
  height: 120px;
  --color: blue;
  --width: 10;
  border: 1px solid #999;
  background-image: paint(myPaint);
}
</style>
<div class="paint-example"></div>

class MyPaint {
    static get inputProperties() {
        return ['--color', '--width'];
    }
    paint(context, geometry, properties) {
        context.strokeStyle = properties.get('--color').toString();
        context.lineWidth = properties.get('--width');
        const x = geometry.width / 2;
        const y = geometry.height / 2;
        context.arc(x, y, 50, 0, Math.PI * 2);
        context.stroke();
    }
}
registerPaint('myPaint', MyPaint);

• https://developer.mozilla.org/ja/docs/Web/CSS/image
• https://drafts.csswg.org/css-images/#image-values