CSS

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

みいと

【background-color】背景色の設定

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

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

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

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

span {
     background-color: yellow;
}

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

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

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

background-colorプロパティの例

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

p {
     background-color: yellow;
}

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

background-colorプロパティの例

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

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

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

 

div{
    background-image: url(img/star1.png);
    height: 200px;
}
<div>
    div要素に背景画像を設定してみます。
</div>

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

background-imageプロパティの例

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

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

background-imageプロパティの例

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

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

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

まとめ

  • 背景色はデフォルトの状態では、マージン以外の部分に適用される
  • background-imageプロパティはnoneまたは画像のURLを指定する
  • 背景画像はカンマ区切りで複数指定できる
  • 背景画像を複数指定した場合は左に指定されている画像が上に表示される
  • 背景画像はデフォルトの状態では、繰り返して表示される

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました