背景の装飾について

今回はcssを使用した背景の装飾についてです。背景色や背景画像などWebページを作る上で背景の装飾はとても大切です。backgroundを用いた様々なプロパティを紹介します。

元になるHTMLは以下になります。

<div style="background-color: #f0f0e8; padding: 10px;">
  <h1>タイトル</h1>
  <div>
    <p class="content">本文</p>
    <p>まとめ</p>
  </div>
</div>

背景装飾を行うCSSプロパティ

背景色を指定するプロパティ

背景色を指定する際はbackground-colorプロパティで指定します。

.content {
  background-color:red;
}

ブラウザ表示

背景画像を表示するプロパティ

背景画像を指定する際はbackground-imageプロパティで指定します。

.content {
  background-image：url(画像パス)；
}

ブラウザ表示

背景画像の繰り返しを指定するプロパティ

背景画像の繰り返しを指定する際はbackground-repeatプロパティで指定します。

.content {
  background-image:url(画像パス);
  background-repeat：no-repeat；
}

ブラウザ表示

背景の装飾についてまとめて指定するプロパティ

背景の装飾についてまとめて指定する際はbackgroundプロパティで指定します。

backgroundの後に画像パスや画像の繰り返しなどをまとめて指定することが可能です。

.content {
  background：red url(画像パス) no-repeat；
}

ブラウザ表示

エンジニアからのアドバイス

backgroundを指定するプロパティは多く、指定方法も複雑です。実務を通して実現したい背景画像の装飾が出てきましたら下記リンクを参考に試してみましょう。