ネットビジネス

忘備録:H2やH3などの見出しに背景画像をつける方法

見出しに背景画像をつける方法1

上記の表示は、下記のコードをcssに書き込みます。

背景にしているのはこの画像。

.back-image1{
background-image:url(https://hico2019.com/wp-content/uploads/2018/11/granping-e1541225257697.jpg);
}

このコードを呼び出すには、下記の通りhtmlに記述。

<h2 class=”back-image1″>見出しに背景画像をつける方法1</h2>

 

見出しに背景画像をつける方法2

repeat-xを指定すれば、画像を横方向にリピートできる。
小さな画像に有効です。

.back-image2{
background-image:url(https://hico2019.com/wp-content/uploads/2018/05/3.png);
background-repeat:repeat-x;
}

このコードを呼び出すには、下記の通りhtmlに記述。

<h2 class=”back-image2″>見出しに背景画像をつける方法2</h2>

見出しに背景画像をつける方法3

repeat-yを指定すれば、画像を縦方向にリピートできる。
画像の位置は横をright、縦をtopに設定すれば右上から開始。

.back-image3{
background-image:url(https://hico2019.com/wp-content/uploads/2018/05/3.png);
background-repeat:repeat-y;
background-position:right top;
}

このコードを呼び出すには、下記の通りhtmlに記述。

<h2 class=”back-image3″>見出しに背景画像をつける方法3</h2>

見出しに背景画像をつける方法4

background-repeat:no-repeatを指定することで、画像を一箇所だけに表示させることが可能。
background-positionは%で指定する他、pxなどで絶対値を指定することもできます。

.back-image4{
background-image:url(https://hico2019.com/wp-content/uploads/2018/05/3.png);
background-repeat:no-repeat;
background-position:10% 40%;
text-align:center;
}

このコードを呼び出すには、下記の通りhtmlに記述。

<h2 class=”back-image4″>見出しに背景画像をつける方法4</h2>

見出しに背景画像をつける方法5

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

.back-image5{
background-image:url(https://hico2019.com/wp-content/uploads/2018/05/3.png);
background-repeat:no-repeat;
background-position:10% center;
background-size:contain;
text-align:center;
}

このコードを呼び出すには、下記の通りhtmlに記述。

<h2 class=”back-image5″>見出しに背景画像をつける方法5</h2>

見出しに背景画像をつける方法6

background-sizeをcoverにすれば、縦横比は保持したまま、背景画像を縦または横幅いっぱいに広げて表示できる。
使い勝手がいいのは、サイズが合わなければ自動で縦か横の範囲がカットされます。

.back-image6{
color: #ffffff;
background-image:url(https://hico2019.com/wp-content/uploads/2018/11/granping-e1541225257697.jpg);
background-repeat:repeat;
background-position:10% center;
background-size:cover;
text-align:center;
}

このコードを呼び出すには、下記の通りhtmlに記述。

<h2 class=”back-image6″>見出しに背景画像をつける方法6</h2>

ABOUT ME
HICO
HICO
ほんの小さな感動が、誰かの人生をちょっと変える。そんな食体験を通して人類に貢献することが僕の使命です。目標は「100年レストラン事業」。お金も才能も人脈もありませんが、実現させるために日々、愚直に考えていることを綴ってます。
人生のアフターコロナ対策、お決まりですか?

コロナショックにより、人の暮らしから考え方、働き方は大きく変わるのでしょう。

どうなるのか?というよりも、どう生きたいのか?

たいせつな人たちと楽しく人生を送る為に必要な資産と、生き方を、ない頭で頑張って考えてます。あなたのお役に立てれば幸いです!