■値 fixed
背景画像の位置が固定され、スクロールしても動かなくなります。
scroll
スクロールに伴って、背景画像も移動します。
■使用例 スタイルシート部分は外部ファイル（sample.css）に記述。
background-attachmentプロパティは、画面をスクロールする際、背景画像をその位置に固定されたままにするか、スクロールに伴って移動するかどうかを指定します。
■値 fixed
背景画像の位置が固定され、スクロールしても動かなくなります。
scroll
スクロールに伴って、背景画像も移動します。
■使用例 スタイルシート部分は外部ファイル（sample.css）に記述。
body {
background-image: url("../images/inu01.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}
HTMLソース
＜html＞
＜head＞
＜link rel="stylesheet" href="sample.css" type="text/css"＞
＜/head＞
＜body＞
：
：
＜/body＞
＜/html＞
background-imageプロパティは、背景画像を指定する際に使用します。や
ジャンル別一覧
人気のクチコミテーマ
-
-
- いけばな ★彡
- 雲竜柳と蘭モカラで(その2) ☆ 生徒…
- (2024-11-13 09:00:09)
-
-
-
- 手作りの庭とガーデニング
- フォックスフェイスの種からの栽培
- (2024-11-13 21:02:26)
-
-
-
- 野菜を育てる
- 赤かぶ収穫白菜大根収穫
- (2024-11-12 23:09:48)
-
だけではなく、
・・などの要素にも背景画像を指定することができます。
背景画像はURLで指定します。スタイルシート部分を外部ファイルにしている場合には、HTMLファイルから見た相対パスではなく、外部スタイルシートファイルからの相対パスで指定しなくてはならないので注意してください。
背景に画像を指定する際には、背景色と文字色も同時に指定するようにしてください。これは、ユーザーの環境により背景画像が表示されない場合に、背景色と文字色の関係により、文字が読みにくくなってしまうことがあるからです。
■値 URI（URL）で画像ファイルを指定
URI（URL）で画像ファイルを指定します。
none
背景に画像ファイルを使用しないことを明示します。これが初期値です。
■使用例 スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample {
color: #000000;
background-color: #f8dce0;
background-image: url("../images/kabe01.gif")
}
HTMLソース
＜html＞
＜head＞
＜link rel="stylesheet" href="sample.css" type="text/css"＞
＜/head＞
＜body＞
＜p class="sample"＞
壁紙を使いこなせるようになると制作の幅が大きく広がります。壁紙はホームページを個性的に彩ります。
＜/p＞
＜/body＞
＜/html＞
© Rakuten Group, Inc.
