HTML 入門 | HTML 基本要素 | HTML 背景(background)

Tags:

HTML 文書の基本背景(background)は白である。HTML 要素ごとにそれぞれの背景が存在する。

HTML では、背景を次のように変更できる。

  1. 背景色を変更する
  2. 背景を画像に変更する

背景色の変更

HTML5 以前は、bgcolor 属性を使用して HTML 要素の背景色を別の色に変更できた。 しかし HTML5 からは bgcolor 属性がサポートされなくなり、CSS を使用して背景色を変更することが推奨されている。

次の例は、CSS スタイルを使用して背景色を別の色に変更する例である。

<style>
    body { background-color: lightgreen; }
    div { background-color: rgb(255,0,128); }
    p { background-color: #FFCCFF; }
</style>

コード実行

CSS の background-color プロパティを使用すると、さらにさまざまな方法で背景色を設定できる。

背景を画像に変更

HTML 要素の background 属性を使用すると、HTML 要素の背景を画像(image)に設定できる。

構文

<タグ名 background="画像アドレス"></タグ名>

次の例は、画像を使用して背景を作成している。

<body background="/resources/images/logo/96x96.png">
</body>

コード実行

背景に画像を使用すると、Web ページの読み込み時間が長くなる。 そのため、通常は小さいサイズの画像をパターン(pattern)として作成し、背景画像として繰り返し表示するように設定する。