background-image/背景画像

background-imageプロパティを使うと背景画像を指定出来ます。

説明

 background-imageプロパティは以下のようにボックスで囲った範囲に表示する背景画像を指定出来ます。

背景画像を指定

構文

 background-imageプロパティの構文は以下の通りです。

background-image: url(ファイル名、又はURL);

 ファイル名は例えばtest.pngです。imageディレクトリ配下であればimage/test.png、親ディレクトリであれば../test.pngとなります。

 URLは例えばhttp://example.com/test.png等と指定します。http://を前に記述する事でURLと認識されます。

 画像形式はPNG以外にもGIFやJPEG等が使えます。

利用例

 background-imageの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div { background-image: url(test.png); }

<div>ホームページ</div>

 上記を表示すると以下になります。

ホームページ

 元の画像は以下の通りです。

背景画像の説明1

 背景画像は指定した横幅や高さで切り取られますが、横幅や高さが画像より大きい場合は繰り返し表示されます。

 上記では、高さは途中で切り取られ、横には繰り返し表示されているのが分かると思います。

 繰り返しをしない場合はbackground-repeatを使います。

背景色との同時利用

 背景色を指定するbackground-colorと同時に利用するとbackground-imageが優先されます。

div {
background-image: url(test.png);
background-color: blue;
}

<div>ホームページ</div>

 上記を表示すると以下になります。

ホームページ

 通常は背景色を指定する意味がありませんが、画像を表示出来ないブラウザではbackground-colorで指定した背景色が表示されます。又、画像を繰り返し表示しない設定にした場合も途中から背景色で表示されます。

関連ページ

・ホームページ作成「ボックスのまとめ

 背景画像の指定や繰り返しをしない方法、余白、幅、枠や回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)