ブロック要素の背景色や背景画像の手前に格子柄を表示する。

ブロック要素の背景色や背景画像の手前に、格子柄（縦縞・横縞・ストライプ・ボーダー・チェック柄など）を表示する。

デモページを表示

CSS

補足

• bg-lattice-xxxxx クラスをつけたブロック要素に position: relative をつけておくこと。また、格子の奥の色を背景色（または背景画像）として指定しておくこと。
• 格子はブロック要素の before 疑似要素の背景イメージとして表示している（格子はブロック要素の背景色・背景画像の手前に表示される）。
• 格子の色や幅・間隔は repeating-linear-gradient の値で指定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• ブロック要素に bg-lattice-xxxxx クラスをつけて、格子のタイプを指定する。