※この記事にはプロモーションが含まれています
目次
見出しに背景画像をつける方法１
背景にするのはこの画像。
ワードプレスの管理画面より、外観＞カスタマイズを選択して、「追加CSS」に記述します。
.back-image1{
background-image:url(背景画像のURL);
}このコードを呼び出すには、下記の通りhtmlに記述。
<h2 class="back-image1">見出しに背景画像をつける方法１</h2>実装イメージ
見出しに背景画像をつける方法１
見出しに背景画像をつける方法２
repeat-xを指定すれば、画像を横方向にリピートできる。
小さな画像に有効です。
.back-image2{
background-image:url(背景画像のURL);
background-repeat:repeat-x;
}このコードを呼び出すには、下記の通りhtmlに記述。
<h2 class="back-image2">見出しに背景画像をつける方法２</h2>実装イメージ
見出しに背景画像をつける方法２
見出しに背景画像をつける方法３
repeat-yを指定すれば、画像を縦方向にリピートできる。
画像の位置は横をright、縦をtopに設定すれば右上から開始。
.back-image3{
background-image:url(背景画像URL);
background-repeat:repeat-y;
background-position:right top;
}このコードを呼び出すには、下記の通りhtmlに記述。
<h2 class="back-image3">見出しに背景画像をつける方法３</h2>実装イメージ
見出しに背景画像をつける方法３
見出しに背景画像をつける方法４
background-repeat:no-repeatを指定することで、画像を一箇所だけに表示させることが可能。
background-positionは%で指定する他、pxなどで絶対値を指定することもできます。
.back-image4{
background-image:url(背景画像URL);
background-repeat:no-repeat;
background-position:10% 40%;
text-align:center;
}このコードを呼び出すには、下記の通りhtmlに記述。
<h2 class="back-image4">見出しに背景画像をつける方法４</h2>実装イメージ
見出しに背景画像をつける方法４
見出しに背景画像をつける方法５
background-sizeをcontainにすると、①縦横比は保持したまま、②画像が全部表示される状態で、③最大限大きなサイズにしてくれます。
元画像が大きすぎる場合は自動で縮小され、小さすぎる場合は自動で拡大されます。
.back-image5{
background-image:url(背景画像URL);
background-repeat:no-repeat;
background-position:10% center;
background-size:contain;
text-align:center;
}このコードを呼び出すには、下記の通りhtmlに記述。
<h2 class="back-image5">見出しに背景画像をつける方法５</h2>実装イメージ
見出しに背景画像をつける方法５
見出しに背景画像をつける方法６
background-sizeをcoverにすれば、縦横比は保持したまま、背景画像を縦または横幅いっぱいに広げて表示できる。
使い勝手がいいのは、サイズが合わなければ自動で縦か横の範囲がカットされます。
.back-image6{
color: #ffffff;
background-image:url(背景画像URL);
background-repeat:repeat;
background-position:10% center;
background-size:cover;
text-align:center;
}このコードを呼び出すには、下記の通りhtmlに記述。
<h2 class="back-image6">見出しに背景画像をつける方法６</h2>