【CSS】コンテンツの背景に画像を使う方法とは?【CSS】コンテンツの背景に画像を使う方法とは?2016.05.15CSSサイトを作っていく際に、あるコンテンツの背景に画像を使いたい...ということがあります。見出しタイトルを目立たせたいから背景は画像にしてみたい、とか、メインコンテンツの枠部分を目立たせたいから背景を画像にしてみたい、とか。イメージとしては、下のような感じになりますね。上の画像を背景画像として表示させているのですが、実はコンテンツの背景に画像を使う場合にはCSSでちょっと操作してあげないとうまく表示されなかったりします。いった感じで切り分ける必要があります。イメージとしては下のような感じですね。中部分の画像に関してはテキストが増えるに従って繰り返し表示されるものになるため、なるべく繰り返し表示されてもおかしくないような切り抜き方をしておくとよいかと思います。コンテンツのCSSを設定する続いて背景に画像を使いたいコンテンツのCSSを設定します。id=”bg”>~</div>に対して背景画像を設定したいと思います。その上で見本のコードは以下になります。border-box;}コンテンツの幅を指定するまず初めにコンテンツの幅を指定しましょう。今回はとりあえず400pxとしました。続いて今回の本題でもあるコンテンツの背景に画像を設定します。3つの画像をすべて指定する必要があります。中部画像の順番で記述します。中部画像の階層で、なおかつ中部画像がコンテンツの内容の量に応じて繰り返し表示されるようになります。中部画像で指定するようにしましょう!体裁を整えるそして最後に、paddingを用いて体裁を整えてあげます。今回使った画像は上部画像と下部画像に葉っぱのデザインが施されているので、上下のpaddingを多めに設定しておきました。