背景画像の表示

今回は、背景に画像を表示する方法について説明します。手順通りにすれば簡単にカスタマイズすることができますので、是非、チャレンジしてくださいね。

ページ全体の背景に画像を表示するには

背景画像のカスタマイズ方法として、ページ全体の背景に画像を表示する方法を例にして説明します。

1. 画像ファイルのアップロード
背景画像（gifやjpegファイルなど）をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

2. CSS（スタイルシート）の編集
次に、「スタイルシート」を編集します。
デフォルト・テンプレートの場合、下記ように編集すると、ページ全体の背景に画像を表示することができます。

＜スタイルシート＞

body { background-color: #8FABBE; }

下記のように修正します。

body { background-color: #8FABBE;　←削除 background-image : url("画像のパス");　←追加 }

背景画像の指定 ： background-image

背景画像を指定するには、background-image というプロパティを使用します。値には、背景画像で使用するURLを指定します。

＜スタイルシート＞

body { background-image : url("画像のパス"); }

背景画像関連の指定

下記のプロパティを使用すると、画像の並べ方や表示位置なども指定できます。

■ 背景画像の並び方を指定

<記述例>

background-repeat : repeat-y;

値	意味
repeat	背景画像は縦横タイル状に並べられます。
repeat-x	背景画像は横方向のみに繰り返して並べられます。
repeat-y	背景画像は縦方向のみに繰り返して並べられます。
no-repeat	背景画像は繰り返されずにひとつだけ表示されます。

■ 背景画像の表示位置を指定

<記述例>

background-position : left top;

値	意味
実数値＋単位 （100px 50px）	横方向と縦方向の開始位置を順にスペースで区切って数値で指定します。 単位にはpx・em・ex・in・cm・mm・pt・pcなどがあります。
％値 (20% 30%)	横方向と縦方向の開始位置を順にスペースで区切って割合で指定します。
左右の配置 （left | center | right） 上下の配置 （top | center | bottom）	横方向と縦方向の開始位置を順にスペースで区切ってキーワードで指定します。指定する順序は問いません。

■ 背景画像の固定配置を指定

<記述例>

background-attachment: fixed;

値	意味
fixed	背景画像の位置を固定します。
scroll	背景画像を他の内容と共にスクロールします。

他の部分で背景画像を表示するには

背景画像の表示方法について、ページ全体の背景画像を表示方法を例として説明しましたが、バナー部分やサイドバー部分などで背景画像を表示する場合は、その該当クラスで、background-image プロパティを追加します。

MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景画像を表示させたいクラスを編集してください。

以上、背景画像を表示する方法について説明しました。
ブログランキングに参加中です。応援お願いします。