↑こんな風にしたいとき。

その1(教科書のやり方)

CSS部
.box {
width : 100px;
background-color: #CF9;
}
.box .bgTop {
background-repeat : no-repeat;
background-position : center top;
background-image: url(bgtop.gif);
width: 100px;
padding-top: 10px;
}
.box .bgBottom {
background-repeat : no-repeat;
background-position : center bottom;
background-image: url(bgbottom.gif);
width: 84px;
padding-bottom: 10px;
padding-right: 8px;
padding-left: 8px;
}

HTML部
<div class=”box”>
<div class=”bgTop”>
<div class=”bgBottom”>
文字文字文字文字文字文字
</div>
</div>
</div>

• 上の例は、教科書に載っているやり方ですが、上下端の画像の背景色と、ホームページに貼り付ける場所の背景色を同じにしないと画像の背景色が見えてしまいます。また、画像の背景を透明にすると、backgraound-colorで設定した色が角に出でしまい、角丸になりません。
• 上下端の画像サイズは、幅100px、高さ10pxです。

その2(背景に影響されないやり方)

CSS部
.box .bgTop {
background-image: url(bgtop.gif);
background-repeat: no-repeat;
background-position: center top;
width: 100px;
height: 10px;
}
.box .bgCenter {
width: 84px;
background-color: #0FF;
padding-right: 8px;
padding-left: 8px;
}
.box .bgBottom {
background-image: url(bgbottom.gif);
background-repeat: no-repeat;
background-position: center bottom;
width: 100px;
height: 10px;
}

HTML部
<div style=”box”>
<div style=”bgTop”></div>
<div style=”bgCenter”>
文字文字文字文字文字文字
</div>
<div style=”bgBottom”></div>
</div>

• 上下端の画像の背景を透明にする必要があります。
• 上下端の画像サイズは、幅100px、高さ10pxです。

CSS部
#link {
background-image : url (xxx.gif) ;
background-repeat : no-repeat ;
background-position : left ;
padding-left : 25px ;
}

HTML部
<a id=”link” href=”http://blog1.dd-company.com/”>sei2の日記へ</a>

• 上の様にすると、アイコンと文字がひとまとまりになるので、ＨＴＭＬ文書の中で扱いやすくなる。
• padding-leftの値は、アイコンの大きさと、文字とアイコンの隙間を見ながら、適当に決める。
• marginを追加すると、文字とアイコンの位置関係を変えずに、移動することができる。