CSSで見出しに背景画像をレイアウトするいくつかのやり方/background-repeat、position、sizeの使い方

フォントアイコンや画像の挿入などでも画像付きの見出しは作れますが、オリジナルの画像を使おうと思ったら、大体の場合は背景画像に設定することになります。そのやり方について詳しく見ていきましょう。

背景画像を設定する方法

bacground-imageに背景画像を設定すれば、見出しの後ろに画像を表示することができます。謎の効果が出ていますが、この画像は本来こういう画像です。

画像の左右は短すぎるためリピートされ、上下は長過ぎて背景に表示し切れていません。

<！-- html -->
<h2 class = "back-image">見出し文</h2>

/*CSS*/
.back-image{
background-image:url(img/splash.png);
}

小さな背景画像を繰り返す場合

background-imageに設定した画像はリピートされますが、これはデフォルトでbackground-repeatプロパティがrepeatに設定されているためです。元の画像が小さければ、background-imageを指定するだけで背景画像を繰り返す見出しを作成可能です。

/*CSS*/
.back-image{
background-image:url(img/repeat.png);
/*↓はデフォルト値なので、実際は記述不要*/
background-repeat:repeat;
}

小さな背景画像を横方向だけ繰り返す場合

background-repeatにrepeat-xを指定することで、画像を横方向だけにリピートさせることが可能です。

/*CSS*/
.back-image{
background-image:url(img/block.png);
background-repeat:repeat-x;
}

小さな背景画像を横方向の真ん中で繰り返す場合

デフォルトでbackground-imageは左上を基準に表示されますが、この基準位置を変更することが可能です。ここでは横の位置はデフォルトと同じleftに設定し、縦の位置を要素の中心部であるcenterに設定した上で、repeat:repeat-xで横方向にだけ画像をリピートさせてます。

/*CSS*/
.back-image{
background-image:url(img/block.png);
background-repeat:repeat-x;
background-position:left center;
}

小さな背景画像を縦方向だけ繰り返す場合

background-repeatをrepeat-yに設定することで、画像を縦にだけリピートさせることが可能です。画像の位置は横をright、縦をtopに設定し、右上から開始されるようにしています。

/*CSS*/
.back-image{
background-image:url(img/block.png);
background-repeat:repeat-y;
background-position:right top;
}

小さな背景画像をピンポイントで設定する場合

ここまでは画像をリピートさせてきましたが、background-repeat:no-repeatを指定することで、画像を一箇所だけに表示させることが可能です。text-alignをかけても、画像の文だけ文字が右にズレないのがポイントですね。
ただしこの状態だと画面サイズが狭くなるにつれて絵と文字の距離が縮んでいくため、どこかでブレイクポイントを設定して画像を変更する、またはvwを使ってテキストサイズを調節するなどの処理が必要となります。
background-positionは%で指定する他、pxなどで絶対値を指定することも可能です。

/*CSS*/
.back-image{
background-image:url(img/sg.png);
background-repeat:no-repeat;
background-position:10% 40%;
text-align:center;
}

背景画像のサイズを変更する場合

repeat、positionときて、最後にsizeです。background-sizeに%やpxでサイズを指定することで、大きさを指定することができます。%は画像に対してではなく、親要素に対しての比率であることに注意してください。数値指定で値をひとつしか指定しない場合、縦幅（高さ）はauto指定となります。

/*CSS*/
.back-image{
background-image:url(img/sg.png);
background-repeat:no-repeat;
background-position:10% center;
background-size:30% 40%;
text-align:center;
}

背景画像を枠に合わせたサイズに変更する場合

background-sizeをcontainにすると、①縦横比は保持したまま、②画像が全部表示される状態で、③最大限大きなサイズにしてくれます。元画像が大きすぎる場合は自動で縮小され、小さすぎる場合は自動で拡大されます。

/*CSS*/
.back-image{
background-image:url(img/sg.png);
background-repeat:no-repeat;
background-position:10% center;
background-size:contain;
text-align:center;
}

枠に合わせたサイズの背景画像を連続で表示させる場合

background-sizeをcontainにしたまま、background-repeatのno-repeat指定を外すことで画像を連続させることができます。

/*CSS*/
.back-image{
background-image:url(img/splash.png);
background-repeat:repeat;
background-position:10% center;
background-size:contain;
text-align:center;
}

背景画像を枠いっぱいに広げる場合

background-sizeをcoverにすると、縦横比は保持したまま、背景画像を縦または横幅いっぱいに広げて表示することができます。サイズが合わない場合、できるだけ画像を「小さく」表示できるように、自動で縦か横の範囲がカットされます。

/*CSS*/
.back-image{
background-image:url(img/splash.png);
background-repeat:repeat;
background-position:10% center;
background-size:cover;
text-align:center;
}

背景画像を枠ぴったりに変形させる場合

画像を枠に合わせて変形したい場合は、sizeに100% 100%を適用する、という方法が適当です。

/*CSS*/
.back-image{
background-image:url(img/splash.png);
background-repeat:repeat;
background-position:10% center;
background-size:100% 100%;
text-align:center;
}

とりあえず以上です。ご参考にして頂ければ幸いです。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27