背景色と画像などを定義することにより、ボックスのデザインがさらにレベルアップします。
前のページでつくったボックスに、以下のように、背景に関する定義をしてあげましょう。
ボックス１
背景色を定義します。属性は、
background-color 値は、
#FFCCCC
ボックス２
背景画像を定義します。属性は、
background 値は、
url(背景画像のパス)
背景画像で手ごろなのが無い場合は、下の画像をダウンロードして利用してください。
←見えにくいけど画像があります。 ボックス１
属性 background-color
背景色 #FFCCCC
ボックス２
属性 background
値 url(背景画像のパス)
ボックス３（これは無視）
属性 background-color
background
.box1{
width: 150px;
height: 80px;
padding: 10px 0px 0px 10px;
border-top: solid #FF9999 1px;
border-right: solid #FF9999 5px;
border-bottom: solid #FF9999 1px;
border-left: solid #FF9999 5px;
background-color:#FFCCCC;
}
まずは、ボックス１．背景色のみを定義しています。
.box2{
width: 150px;
height: 80px;
padding: 10px 0px 0px 10px;
border-top: solid #FF9999 1px;
border-right: solid #FF9999 5px;
border-bottom: solid #FF9999 1px;
border-left: solid #FF9999 5px;
background:url(img/haikei.gif);
}
つぎは、背景画像を定義したボックスです。
属性は、良いとして、値の書き方が特殊です。
url( 背景画像へのパス )
となっていて、背景画像のパスとは、そのページから背景画像までの道順を示すもの。
背景画像のＵＲＬと、とってもらってかまいません。
画像の拡張子（.gif とか .jpg とか）を忘れずに記述してください。
.box3{
width: 150px;
height: 80px;
padding: 10px 0px 0px 10px;
border-top: solid #FF9999 1px;
border-right: solid #FF9999 5px;
border-bottom: solid #FF9999 1px;
border-left: solid #FF9999 5px;
background-color:#FFCCCC;
background:url(img/haikei.gif);
}
最後に、ボックス３です。
これは、見てわかるとおり、背景色と、背景画像を同時に定義しています。
そして、ボックスの構造上、背景色より、背景画像のほうが、上位に位置するので、
見た目には、背景画像が表示されます。
