ページ全体に色違いの背景パターンを表示する方法【CSS】

ページ全体にパターンを表示させて、色違いの背景色を重ねたい時のサンプルを作ったのでメモ。

完成したページを確認する（デモ）
背景全体にパターンを表示する
要素に背景色を追加
まとめ

完成したページを確認する（デモ）

こちらが完成したページです。背景のパターンは透過pngで作成しています。画像を差し替えれば色々なデザインが実現できそうです。

デモ

実際の動作はこちらでご確認ください！（別ウィンドウが開きます）

デモを確認する

背景全体にパターンを表示する

まず、普通に背景イメージを設定します。
今回、body要素に背景色、add-patternの背景にパターン画像を設定しました。

See the Pen MWpqaYY by donguri2020 (@m-ke) on CodePen.

要素に背景色を追加

白の透過グラデーション

特定の要素の背景に白の透過を設定しました。パターンが消えることなく透過で表現されています。
ついでに両端をグラデーションさせるとおしゃれなカンジ

See the Pen WNpgWzR by donguri2020 (@m-ke) on CodePen.

ポイントは、擬似要素に背景色を指定して、position:absoluteで要素を重ねるところです。
要素を重ねるので、親要素にrelativeを指定し、z-indexで重ね順を調整します。

HTML

 <section class="item section01">
    <h2>Background gradient</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</section>

CSS

.item::after {
    content: "";
    position: absolute;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5956757703081232) 8%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.5984768907563025) 93%, rgba(255,255,255,0) 100%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -100;
}