|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |

background 関連プロパティ

background 関連プロパティを理解する

background-color プロパティ

background-color (背景色)

セレクタにマッチした対象の背景色を指定します。

background-color は子要素に継承されません。デフォルトの値は透明を意味する transparent です。親要素の色が透過します。inherit は、親要素の値を明示的に継承する指定です。17 色の色名か、数字による指定が可能です。色の指定を参照ください。

ページトップへ

background-image 関連プロパティ

background-image (背景画像)

背景に表示する画像ファイルを指定します。また、inherit や none も指定することができます。none は背景画像なしを、inherit は親要素の値を継承を意味します。

注意アイコン

画像ファイルへのパスでの注意点

画像ファイルへのパスは、CSSプロパティを入力したファイルからの相対パスを入力します。外部スタイルシートに入力する場合は、外部スタイルシートからの相対パスを入力することに注意。(X)HTMLファイルからのパスではありません。

background-repeat (背景画像の繰り返し)

繰り返しの指定をします。

ページトップへ

background-attachment (背景画像の貼り込み方)

画像の背景への貼り込みかたを指定できます。

ページトップへ

background-position (背景画像開始位置)

background-position : [水平方向] [垂直方向] ; と記述します。省略した場合は background-position : 0% 0% ; と見なされます。

[水平方向] 画像の表示開始位置の水平方向を指定します。

[垂直方向] 画像の表示開始位置の垂直方向を指定します。

ページトップへ

background プロパティ

background (一括指定)

背景の色、画像、画像の繰り返し、画像の固定/非固定、画像の位置の値を半角スペースで区切って指定します。順は不同です。

以下の3つの例は、いずれも同じスタイルを表しています。

background 関連プロパティの値は省略できます。省略した場合は以下の値が適用されます。

ページトップへ

ホームページ・ビルダー スタイルシート マネージャで背景を指定する

スタイルの設定ダイアログを使用する

スタイルの設定の色と背景タブホームページ・ビルダーの 「スタイルの設定」 ダイアログでも背景の色と背景画像を指定することができます。(参照:スタイルの設定「色と背景」

注意アイコン

外部スタイルシートで指定する画像ファイルへのパスでの注意点

外部スタイルシートに背景画像ファイルを指定する場合は、外部スタイルシートの保存時に相対的パスに変更してくれませんので、直接相対パスを入力する必要があります。画像ファイルへのパスは、外部スタイルシートファイルからの相対パスを入力します。

注意アイコン

「スタイルの設定」 ダイアログで水平方向・垂直方向を指定する時に経験した問題

固定あるいはスクロールで画像の水平方向と垂直方向を一度セットしたあと、微調整のつもりでその値を変更して新しい水平・垂直方向の値を入力すると、背景画像が左隅に戻ってしまう現象があります。ソースを見ると、background-position のステートメントが消えてしまっています。

HPB-1314 と同じ問題のようですが、これはV8までの問題として報告されています。しかも、背景の固定の場合だけでなく、スクロールの場合にも発生するので違うのかもしれません。

回避方法は、背景画像の場所の値を変更するときは、新しいスタイルをセットしなおして行うこと、ということになります。

注意アイコン

[背景画像] と [背景色] を両方指定した場合、背景色が反映されない場合

[背景画像]を挿入し、また[背景色]も指定した場合、背景色がプレビュー (および Internet Explorer ブラウザ) で表示されないことがあります。この時展開されているスタイルシートでは、背景色の指定の記述 (background-color) が背景画像の指定の記述 (background-image) の前に記述されています。

回避策は、背景色の指定の記述 (background-color) を背景画像の指定の記述 (background-image) の後に記述します。

ページトップへ

|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |