ウェブページ全体の背景画像の指定
前回は、画像ファイルbg_body.pngをimagesフォルダに入れました。
今回は、この画像ファイルを利用して、ウェブページ全体に背景画像を敷き詰めるスタイル指定を追加しましょう。
背景画像を指定するには、background-imageプロパティを使用します。
ウェブページ全体に背景画像を表示させたいので、body要素をセレクタにします。
base.cssに以下の記述を追加してください。
CSSソース(base.css)
@charset "utf-8";
/*============================================
全般的なスタイル
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
}
body {
background-color:#cccccc; /*ページ全体の背景色*/
background-image:url("images/bg_body.png"); /*ウェブページ全体の背景画像*/
font-size:95%; /* フォントサイズを95%にする */
font-family: "MS ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
line-height:1.5; /* 行の高さを1.5倍にする */
color:#333333; /* 文字色を濃い目のグレーにする */
}
div#pagebody {
width:1000px; margin:0 auto; /*内容全体をセンタリング*/
background-color:#ffffff; /*内容全体の背景色*/
}
/*============================================
メインメニュー
============================================*/
ul#menu {
width:960px; height:50px; /*メインメニュー部分の幅と高さ*/
margin:0px 20px; /*上下マージン0px、左右マージン20px*/
}
#menu li {
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
float:left; /*リスト項目を横に並べる*/
}
#menu li a {
background-color:navy; /*背景色*/
color:#ffffff; /*文字色*/
display:block; /*リンク部分をブロック表示にする*/
width:240px; height:35px; /*幅と高さ*/
padding:15px 0px 0px 0px; /*上パディング*/
text-align:center; /*テキストをセンター揃えにする*/
text-decoration:none; /*リンク部分を下線無しにする*/
background-image:url(images/bg_menu1.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像を繰り返さない*/
}
#menu li a:hover {
background-color:#000066; /*リンクにマウスが乗ったら背景色を変更する*/
background-image:url(images/bg_menu2.png); /*リンクにマウスが乗ったら背景画像を変更する*/
}
保存をしたらブラウザで表示してみましょう。
ページ全体の背景にドットのテクスチャが表示されれば成功です。
background-imageプロパティで背景画像を指定した場合、背景画像の繰り返し方法を特に指定しなければ、縦方向と横方向の両方に繰り返されて、タイルを敷き詰めたような表示になります。
背景画像が表示されない場合には、background-imageプロパティの値に指定した画像ファイルのパスが間違っていないか、画像ファイルがちゃんとimagesフォルダの中に保存されているかなどを確認してみてください。
画像ファイルが存在しない誤ったパスを指定しても、単に画像が表示されないだけで、エラーメッセージなどは表示されません。
CSSでのURLの指定
ウェブ制作で画像を利用する場合、CSSファイルやHTMLファイルから画像ファイルの所在地を指定します。
そのため、画像ファイルを保存する際には、制作者は画像ファイルがどのフォルダにあるのかを把握しておく必要があります。
背景画像を指定する際には、background-imageプロパティの値に画像ファイルのURLを指定します。
URL(Uniform Resource Locator)とはファイルの所在地のことです。
CSSでURLを指定する際には、url()関数を使用します。
URLは絶対パスでも相対パスでも指定できます。
例:絶対パスによる指定
background-image: url("https://htmqcom1.wpengine.com/tech/images/bg.png");
相対パスでURLを指定する場合には、HTML文書からのパスではなく、CSSファイルからのパスを指定します。
例:相対パスによる指定
background-image: url("images/bg.png");
尚、値として指定するファイルへのパスは、ダブルクォーテーション( ” )、または、シングルクォーテーション( ‘ )の引用符で囲みますが、引用符を省略することもできます。
まとめ
- background-imageプロパティの値には、背景画像ファイルのパスをurl()関数で指定する
- 誤ったパスを指定すると、単に背景画像が表示されないだけでエラーメッセージは表示されない
- 背景画像の繰り返し方法を特に指定しなければ、縦横にタイルを敷き詰めたような表示になる
<前へ | 目次へ | 次へ> |