見出しの先頭にアイコン画像を付ける

2019年12月27日

前後に画像を付けたいとき(前後に括弧などを付けたいなど)は、backgcound-imageで画像をもう一枚追加すれば良い。

HTML


見出し見出し

CSS


h1 {
    font-size: 32px;
    line-height: 48px;
    text-align: left;
    padding-left: 70px; /* 見出しの文字と画像が重ならないように */

    background-image: url('crown.png');
    background-position: center left;
    background-repeat: no-repeat;
    /* サイズは画像の元サイズを利用して計算
    　　もちろん、普通にpxで指定しても良い */
    background-size: calc(418px * 0.16)  /* width */
                     calc(300px * 0.16); /* height : 48px , line-heightと合わせる*/
}