背景に画像を設定する方法です。今回は、いつにもまして^^;冗長なので、「もくじ」を作りました。url(画像のアドレス);を使います。【background-image】は、ほぼ、すべての要素に指定することが出来ます。(bodyでも、divでも、h1、h2、p、span・・・等等でもOK)↓↓↓では、下の画像を【body】の背景に指定してみます。url(画像のアドレス);}↑↑↑このように、画像は、繰り返され、ページ全体に敷き詰められます。url(画像のアドレス)】の初期値(デフォルト)スタイルです。repeat;】を追加してもしなくても、画像は繰り返し表示されます。同じ表示(画像は繰り返される)になります。url("image/sample.png");と、書かれているものがあります。つけないの?答え:どちらでもいい。この括弧()の中には、スペース・ダブルクォーテーション・シングルクォーテーションを自由に入れることが出来るそうです。「入れることが出来る」ってことなので、入れなくても良いのです。※ただし、ダブルクォーテーション・シングルクォーテーションは、同じもので括る。(開始ダブルで終了シングルはダメってことね!)★注意する点としては・・・urlに、スペースやら、括弧やら、コンマ等がある場合は、ダブルクォーテーション及び、シングルクォーテーションで括るスペースやら、括弧やら、コンマ等の前に、【¥】をつけ回避するいずれかの方法を取らないと、画像が表示されません。bbb(ccc).jpgだったとします。(↑見難いですが、aとbの間には、スペースも入っています。シングルクォーテーションで括ると、記載しないと、画像は表示されません。私は、ファイル名に、括弧を使ったり、スペースを入れることはないので、クォーテーションで括っていません。ホームページビルダーは、クォーテーションなしが標準のようなので、クォーテーションを入れたい人は、入力してください。URI』」をご覧ください。背景画像のバックに、背景色を指定する使用する画像が透過されていると、背景色を変えるだけで、ずいぶんとページの印象が変わります。#000000;/*------背景色黒*/}↑↑↑上の青いお花は、回りが透過されているので、背景色を設定するとこのように、表示されます。当たり前ですが、お花の画像の回りが白色ならば、いくら背景色を設定しても、反映されません。背景色との組み合わせで、便利な素材は、水玉やストライプです。repeat-x;を加えます。↓↓↓下の画像をBODYに設定してみます。この画像は、レース部分は白色で他は透過されているので、背景色を設定しないと、真っ白の画面になってしまいます。/*背景色*/}↑↑↑このように、背景画像は、横一列に表示されます。repeat-y;と、書き加えます。↓↓↓下の画像を「BODY」に設定してみます。/*背景色*/}↑↑↑このように、背景画像は、縦一列に表示されます。画像を繰り返したくない場合は、「繰り返さないでね!」という指定を加えます。no-repeat;と、書き加えます。/*画像を繰り返さない設定*/}↑↑↑このように、ひとつだけ表示されます。背景画像は、動かないようにする(固定)背景画像も、一緒に動くようにする(スクロール)この指定が出来ます。↓↓↓このように、背景画像を設定しました。背景画像のスクロールは、【background-image】のデフォルト値です。/*画像も一緒にスクロール*/↑↑↑画像のスクロールの指定は、書かなくても良い。/*画像も一緒にスクロール*/}と、書いても良い。url(画像のアドレス);}とだけ書けば良い。背景画像は、動かない。fixed;↑↑↑固定を指定するスタイルを追加する。fixed;】が、ちゃんと表示されるのは、bodyタグに指定した場合です。他のタグに(divやh1~やpなどなど)指定すると、うまく表示されません。一つ設定出来るタグがあるんですよ!それは、「htmlタグ」です。fixed;】は、htmlタグでも正常に表示されます。↑↑↑上の画像は、横一列のレースの画像を【html】の背景画像に指定し、猫の画像を【body】の背景画像に設定しました。どちらも、画面に対して、ちゃんと指定した位置に、固定され表示されています。→サンプルページへホームページビルダーの「ページ編集画面」の画面上では、これらのCSSが正しく表示されないことがあります。fixed;】を指定しても、ちゃんと固定で表示されてしまう。htmlに指定すると、表示されない。あることなので、必ず、ブラウザで確認してみてくださいね!※私が使用していのは、ホームページビルダー13です。背景画像の位置を指定する【background-position】これは大変便利なので、いろいろと活用出来ます。画像の位置は、プロパティ【background-position】に、続く2つの【値】で指定します。前の値が、横(水平方向)後の値が、縦(垂直方向)値と値の間は、半角のスペースを空ける。値の起点は、左上html・body以外に指定する場合(divやpやh1などなど)、そのボックスの左上が起点となります。※キーワードと数値では、若干違うので、下記の各々の項目をご覧ください。bottom背景画像を「右上」に配置する場合は下記のように記載します。bottom】があります。top;】と、書いた場合topは、垂直方向の指定なので、指定されていない「水平方向」は、中央に配置される。数値+単位で指定する単位は、px(ピクセル)や、%で、記載します。-30px;】※%にも指定出来るが実用的なのはピクセルパーセンテージの位置ワンポイントとして、背景を入れたい時にパーセンテージの指定は便利です。横(水平方向)は、左から100px、垂直方向は、50%・真ん中に配置される。ひとつだけの数値は、必然的に水平方向の値となるので、垂直方向は、常に真ん中配置となる。画像の位置を指定する(数値+単位指定)実際に使ってみよう!下記のサンプルは、こちらからどうぞ。/*画像分プラスαの左余白*/}画像(アイコン)の大きさは、16px×16pxで、フォントサイズが22px。】で、画像の縦の位置(垂直方向の位置)を調整。左のパッディングは、画像の幅+画像の文字間の余白をとる。