【background-color / background-image】背景色と背景画像の設定

【background-color】背景色の設定

background-colorプロパティを使用すると、ボックスの背景色を設定することができます。
デフォルトの状態では、マージン以外の部分に背景色が適用されます。

色の指定方法はこちらを参照してください。

CSSの色の指定方法CSSの色の指定方法をザックリとまとめました。...

下記のように背景色を黄色にするクラスを設定して試してみます。

span {
     background-color: yellow;
}

適用させるHTMLは、このような感じのものを用意しました。

<p><span>背景色</span>を設定した<span>クラス</span>を試してみます。</p>

これで下記のように、span要素に背景色を付けることができます。

background-colorプロパティを、p要素のようなブロックレベルの要素に設定すると

p {
     background-color: yellow;
}

このように改行が入る直前まで色が付きます。

【background-image】背景画像の設定

background-imageプロパティを使用すると、要素の背景画像を設定することができます。
値にはnoneというキーワード、または画像のURLを指定します。

試しにこんな感じの画像を背景画像に設定してみます。

div{
    background-image: url(img/star1.png);
    height: 200px;
}

<div>
    div要素に背景画像を設定してみます。
</div>

これをブラウザで確認すると下記のようになります。

背景画像に指定された画像は、デフォルトではこのように要素内で繰り返し表示されます。
また、背景画像はカンマ区切りで複数指定することができます。
試しに赤い星よりも少し大きい黄色い星を追加してみます。
(※星の画像の背景は透明にしてあります。)

div{
    background-image: url(img/star2.png),url(img/star1.png);
    height: 100px;
}

複数の背景画像を指定した場合は、このように左側に指定した画像が上に表示されます。

背景色と背景画像のまとめ

今回は背景色(background-color)と背景画像(background-image)についてまとめました。
背景色を指定することで、だいぶデザインの幅が広がりそうですね。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。