Webデザインを勉強する中で、いろんなサイトを見ていると、「これやってみたい！」「どうやってやるんだろう？」という部分がいっぱいあります。
この記事は、そのソースを見て勉強したもののメモです。

パターン画像を使って可愛い背景を作る

椿音楽教室さまのWebサイト（2017/7/12現在）のトップページ、コンタクトフォーム部分の背景にトライしてみました。下側だけ真似します。
ゴール（背景のみ）はこんな感じ！

まずは画像を用意

シームレスなパターン画像を下記のサイトさまからダウンロードしました。

商用利用、加工ＯＫ！無料WEB素材サイト　WEB WORK KIT
Photoshop用のパターン画像だったので、パターンとして読み込んだ後、PNG画像に書き換え。

  1. Photoshopのレイヤースタイル>パターンオーバーレイのパターンを選択するコマンドで、読み込んだ画像をマウスホバーし、元画像のサイズを表示
  2. 元画像と同じサイズのキャンバスを作成
  3. レイヤースタイル>パターンオーバーレイでこのパターンをキャンバスに描画
  4. PNG形式で保存

これで、シームレスなままでパターン画像を書き出すことができます。…というのを参考サイトさまで学びました。

これで四角いパターン画像が出来上がりましたが、コンテンツが終わった後の裾部分も作ります！
四角いパターン画像に、横幅（直径）が同じ円のオブジェクトを作り、画像の上部と円の中心、両端が揃うように重ねて、マスクをかけます。
半円が出来上がるので、不要な余白は極力カットしてPNG画像書き出し。

これで必要な素材ができました。

HTML/CSSで実装！

HTMLは、

<div class="content_wrapper"></div>

としまして。
CSSには、

.content_wrapper {
position: relative;
width: 任意;
height: 任意;
background: url(四角画像のパス) repeat bottom left;
}

とすると、ただの四角い箱ができるわけですが、そこに裾をつけてあげるのです。

.content_wrapper:after {
  position: absolute;
  bottom: -yyypx;←半円画像の高さ分マイナス
  left: 0;
  content: "";
  width: 100%;
  height: yyypx;←半円画像の高さ
  background: url(半円画像のパス) repeat-x top left;
}

実際にコードを書いて、中にテキストを入れてみたものがこちら。

まとめ

ポイントは、

  1. 元のパターン画像（四角）を、上側から幅がぴったり合うように切り抜くこと
  2. 四角画像の下側と、半円画像の上側（元は四角画像の上側）が合うように並べていくため、四角画像は下から上に敷き詰め（background-position: bottom left)、半円画像は上側を上部に合わせた上で右方向に並べていくこと（background-repeat: repeat-x; background-position: top left)

でしょうか。
また、擬似要素:afterで裾部分を作るのはオリジナルのサイトさまのソースから学びました。HTMLに余計なコードを増やさずに済むというわけですね。