スタイルシートで背景を設定する
”背景”はＨＴＭＬだけでも設定することができるのですが、スタイルシートで背景を設定しておいて外部ＣＳＳに保存しておくと、一度にたくさんのページの背景を変更することができて効率的です。
背景はほとんど全てのタグに設定することができます。例えば、「div」に赤色の背景、「p」に青色の背景を設定すれば、基本背景は赤で文字を表示する部分だけ青色の背景が表示されます。
- background-color (背景にワントーンの色を付ける)
- background-image (背景に画像を設定する)
- background-repeat (背景の繰り返しの設定)
- background-position (背景画像の表示位置の設定)
背景に画像を設定する
背景に画像を設定する方法について説明します。
背景に画像を設定するには、
セレクタ{background-image:url(画像のＵＲＬ)}
と記述します。画像へのリンクは相対パスで行います。(相対パスについてはこちら)。
それではサンプルとして、背景画像に
を設定してみましょう。
<記述例>
【css記述】
.sample1{background-image: url(../img/css/haikei-img.jpg)"}
【HTML記述】
<div class="sample1"><p>背景に画像を設定してみました。<br/>初期状態では、背景画像は縦横方向に敷き詰めて表示されます。</p></div>
<記述例>
背景に画像を設定してみました。
初期状態では、背景画像は縦横方向に敷き詰めて表示されます。
という感じになります。上でも書いていますが、背景画像を設定するとその画像が縦方向にも横方向にも敷き詰めて表示されるようになります。
そこで、背景画像の繰り返し方法の設定が必要になってくるわけです。
 |
 |
 |
|---|
