backgroundで背景に画像

ここでは、スタイルシートの「background」のプロパティを使用して、例の見出し4に対して背景画像を敷く方法を解説します。

background

スタイルシートのプロパティに「background」という背景画像を指定するプロパティがあります。このプロパティで指定した画像は、同時に繰り返し、位置などを指定する事が出来ます。実際に例を見てください。スタイルシートは以下のようになります。(赤線が追記部分。borderのプロパティを外しました。)

h4.samplecolor {
color: #FF0000;
text-decoration: underline;
font-size: 14px;
padding: 0px 0px 0px 20px;
background: url("images/sample_h4.gif") no-repeat left center;
}

上記も、前回解説した「複数の値をまとめて指定する方法」を使用しています。上記例のbackgroundの場合、3つ値が並んでおり、「背景画像のURL・・・繰り返しの有無・・・横の位置・・・縦の位置」の順番で値を指定しています。つまり、ここでは「自分(スタイルシートのファイル)の置いてあるフォルダの中にあるimagesというフォルダの中にあるsample_h4.gifを背景画像として使用し、繰り返さずに、左寄り、縦は中央の位置」といった具合に値を指定しています。では、実際に動作を見てみましょう。

見出し4

見出し4の背景に、「見出し4」という文字と若干重なり画像が入り込んでいるかと思います。用意した画像が少し大きめだったため、このままでは全て表示されず、表示されている位置も自然ではありません。heightpaddingを使って画像との位置を整えます。スタイルシートを以下のように変更します。(赤線が変更部分)

h4.samplecolor {
color: #FF0000;
font-size: 14px;
padding: 1px 0px 0px 28px;
background: url("images/sample_h4.gif") no-repeat left center;
height: 23px;
}

新しく「height」というプロパティを追加しました。これは、そのスタイルの縦の幅を指定します。更に「padding」のプロパティの最初の値(上の余白)を1ピクセル開け、4つ目の値(左の余白)を20ピクセルから28ピクセルに変更しました。画像の縦の幅は24ピクセルで、paddingの縦で指定した値と、heightの値で指定した値(つまり、このスタイルの縦の合計幅)が画像の縦幅と同じ24ピクセルになるようになっています。(画像が線を中心としているため、text-decorationのプロパティで指定していた下線をまるごと消しました。)では、実際に動作を見てみましょう。

見出し4

さきほどより位置が整って表示されたと思います。このように調整してうまく文字との位置を合わせましょう。

backgroundで使用する値

backgroundで使用する値として、3つ「背景画像のURL・・・繰り返しの有無・・・横の位置・・・縦の位置」の順番で値を指定しましたが、背景画像のURLは、「絶対パス」と「相対パス」どちらでも構いません。背景画像のURLはダブルクォーテーションで囲みましょう。繰り返しの有無については「no-repaet」で繰り返し無し、「x-repet」で横に繰り返し、「y-repet」で縦に繰り返しを指定出来ます。横の位置については「left」(左)または「center」(中央)または「right」(右)そして数値でも指定出来ます(例:左から2ピクセルならば「2px」)。縦の位置については「top」(上)または「center」(中央)または「bottom」(下)そして数値でも指定出来ます。(例:上から2ピクセルならば「2px」)。

backgroundで背景色を設定

上記の3つの値を指定するうちの、どこでも構いませんので、指定したい背景色を#RRGGBBの形で入れます。(こちらも直接「white」など色の名前を指定しても良いです)すると、以下のように背景色を付ける事が出来ます。サンプルのスタイルシートは下記。(赤瀬が追記部分)

h4.samplecolor {
color: #FF0000;
font-size: 14px;
padding: 1px 0px 0px 28px;
background: #EEE8AA url("images/sample_h4.gif") no-repeat left center;
height: 23px;
font-family: "MS P明朝";
font-weight: normal;
}

background」のプロパティに「#EEE8AA」を追記しています。これで背景色が「#EEE8AA」の色になりました。では、実際に動作を見てみましょう。(わかりにくいかもしれませんが、背景の色が切り替わっています)

見出し4

スタイルシートで見栄えを整える場合、この「background」でうまく背景画像を入れて見た目を整えていきます。

次は「font-familyで書式を変更」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像現在のページ
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?