Dreamweaverのはじめかた

CSSでドキュメントの背景に画像をいれる

HTMLファイルの背景に画像を挿入するにはCSSプロパティ「background-image」を使います。

背景する画像のファイル形式は、GIF、JPEG、PNGとブラウザで表示できる画像であれば、なんでもいいです。

ただし、あらかじめ、背景にしたい画像を用意しておく必要がありますので、注意してください。

以下に例として<body>要素に「backimg1.png」という画像を配置する手順を説明します。

今回配置する「backimg1.png」は以下のような大きさの画像です。

  1. 「ウィンドウ」から「CSSスタイル」を選択し、「CSSスタイル」パネルを表示します。
  2. 表示された「CSSスタイル」パネルの右下にあるアイコン説明: https://lh5.googleusercontent.com/JFVFJmLXFic8Vu6aW32dgUuE6T2qOTbBVQ_Gy2UwjafqDNoyQkn3B9dD1-cQFr4tuUrEXn9NPpnT2i9gC-SUDaBDSxyVfFHbvEbqyCe-c9x7ZG3op1gを選択します。

  3. 表示された「新規CSSルール」パネルを次のように入力し、OKを押します。

    セレクタータイプ:タグ(HTMLエレメントの再定義)
    セレクター名:body
    ルール定義:(このドキュメントのみ)

    ※この例では、同じドキュメント内にCSSルールを設定します。
  4. 次に表示された「CSSルール定義」ウィンドウのカテゴリが「背景」に変更し、「Background-image」の参照ボタンを押して背景に配置する画像を選びます。
  5. 画像を選択したら、「OK」を押して、このパネルを閉じます。
    これで背景に画像が全面的に配置されます。

ドキュメントの背景に配置した画像は、画像の大きさに関わらず、ドキュメント全面に繰り返されて何度も表示されます。

もしも、背景の画像を繰り返し表示されないようにするには「Background-repeat」を設定します。

プルダウンで選択するだけです。それぞれ次のように設定されます。

repeat 選択してないときはこの状態と同じになる
repeat-x 左から右へ、X軸方向に画像が繰り返し表示される
repeat-y 上から下へ、Y軸方向に画像が繰り返し表示される
no-repeat 配置した画像を繰り返し表示させない

Dreamweaver CS5.5の操作方法 目次にもどる

このページの上へ
Dreamweaverのはじめかた Dreamweaver CS 5.5編 制作著作/ノンピリオド:村山秀明