チェック・ひし型・ドット背景を画像を使わずCSSで表現

ホームページやブログの背景にはフリーの画像素材を使って表現する事が多いと思いますが、CSSだけでも表現できます。 例えばCSS3のグラデーション機能を使えば、画像を使わずにチェックの背景やひし形の背景、ドット背景を表現することが可能です。 このページでは、ひし型・チェック・ドット背景を画像を使わずCSSだけで表現した背景パターンのサンプルを紹介していきます。 最初に各背景の表示サンプル、最後に設定方法などを紹介します。 基本的に全部コピペするだけでサイトに実装できます。 チェック・ドット・ひし型の背景一覧 CSS3を使って、背景が透過されているチェック柄・ドット・ひし形の背景パターンを作成しています。 ベンダープレフィックスは「-webkit-」のみ付けています。 必要に応じて追加・削除して下さい。 チェック背景1 body{ background-image: -webkit-linea