メッセージボードの背景（2枚の画像で）

つぎは2枚の画像をつかってメッセージボードの背景を作ります

ときどきメッセージボードの内容を変更される方は

自動で背景の高さが変わりますからこちらが便利です

画像を作ります
下の画像は余裕を持って長めに作ってください

上の画像（3カラム用）

下の画像（3カラム用）

クリックすれば原寸大の画像が表示されます

お持ち帰り加工は自由に・・・

ＣＳＳです

/*メッセージボード*/
.skinMessageBoard2{
background-image:url(上の画像のＵＲＬ);
background-repeat:no-repeat;
background-position:center top;
}
.skinMessageBoard{
background-image:url(下の画像のＵＲＬ);
background-repeat:no-repeat;
background-position:center bottom;
border:none;
}
.skinMessageBoard3 {
padding:50px 60px 50px 60px;/*文字位置上Ａ 右Ｂ 下Ｃ 左Ｄ*/
color:#333333;/*文字色*/
}

2枚の画像ですから下の画像が短いと

メッセージが長い場合・・・

スキマができてしまいます

上の画像に透過した画像を使うと・・
透過部分に下の画像が表示されてしまいます

上の画像の背景はブログの背景と同じ色にします

あるいは透過の必要のない四角い画像を使います

じつは・・・この2枚の画像を使う場合（1枚の画像の場合も可能です）

メッセージボードの中にもう1枚背景画像が置けます

メッセージボードの中に

このような画像を入れてみます・・・

ＣＳＳです

.skinMessageBoard3 {
background-image:url(中の背景画像のＵＲＬ);
background-repeat:no-repeat;
background-position:280px 60px;/*表示位置 左からＥ 上からＦ*/
}