要素が縦に伸びる場合に背景をループさせたい ボックス要素にテキストを流し込んだ時、文章量によって要素の縦幅が可変することを想定しなくてはならない場合がある。 枠の中央だけループさせる フラットデザインが流行な昨今、背景にあまりリッチな画像を用いる機会は減ったが、例えば以下の様な飾り枠の中にテキストを収めるケースを想定する。 このようなデザインの枠の可変を想定する場合、上下の飾りの部分はそのままに中央部分だけをループさせる処理をすると良いのが想像できると思う。 画像は3つに切り分ける 画像は以下のように3つに分けてスライスすると良い。 上下の赤枠の飾り部分はcssでループ処理をさせず、 中央にのみbackground-repeat:repeat-y;を指定する。 コードはこんな感じ コードは以下のように書く。

