見出しの文字数と背景の長さをそろえる２

見出しと背景１をさらに応用して、背景に画像を使用するテクニックです。

テクニック使用前（見出しと背景１は使用済み）

テクニックに失敗した例

テクニック使用後

テクニックに失敗した理由は用意した画像にあります。失敗例では このような画像を用意していました(分かりやすくするため背景に色をつけてあります)。

これでは文字を入れるスペースが決まっているので、見出しが長くなると対応できません。

テクニックを成功させるポイントは このような画像用意することと(分かりやすくするため背景に色をつけてあります)、spanタグを組み合わせることです。
ソースは次のようになります。赤字は特に大事なところです

スタイルシート
h6.back{
    font-size:medium;
    background-color:#FFffcc;
    display:inline;
    background-image:url(../../csstec/img/fire.gif);
    padding-left:40px;
    background-repeat:no-repeat;
    background-position:center  left;
}
span.back{
    background-image:url(../../csstec/img/fire.gif);
    padding-right:40px;
    background-repeat:no-repeat;
    background-position:center  right;
}

HTML
<div><h6 class="back"><span class="back">見出し</span></h6></div>

大事なのはパディングで文字位置をずらすこと、背景を繰り返さないこと、背景の表示位置を設定することです。
paddingは自分で用意した画像に合わせて変えてください。

---

使いこなすための＋α

使用する画像の大きさや、文字の大きさによって背景の表示のされ方が変化します。 状況に応じてheightやpaddingを調整してください。

使用する画像は透過GIFである必要はありません。丸い画像を使うなら透過ではないほうが きれいに表示されることもあります。いろいろ試してみてください。

文字の後にimgタグを持ってきても同じような効果が得られますが、汎用性や位置の微調整を考えると、 spanタグを使ったほうが有利になります。

---