background-attachmentのscroll | fixed

プログラミング初心者です

background-attachmentのscroll | fixed | localが効かない原因を特定したいです。

HTML
1<!DOCTYPE html>
2
3<html  lang="ja">
4<head>
5	
6	<title>Background Properties</title>
7	<link rel="stylesheet" href="style.css">
8	<link rel="stylesheet" href="page-styles.css">
9</head>
10<body>
11	<div class="scroll attch">
12		<h2>Scroll</h2>
13		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	
14		</p>
15		<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
16		</p>
17		<p>sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
18		</p>
19	</div>
20	<div class="fixed attch">
21		<h2>Fixed</h2>
22		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	
23		</p>
24		<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
25		</p>
26		<p>sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
27		</p>
28	</div>
29	<div class="rocall attch">
30		<h2>rocall</h2>
31		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	
32		</p>
33		<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem
34		</p>
35		<p>sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
36		</p>
37	</div>
38</body>
39</html>

CSS
1.box{
2	background-color: #E4E4E4;
3	background-image: url("img.ta.png");
4	background-repeat:no-repeat;
5	background-position: right top;
6}
7
8.scroll{
9	background-attachment: scroll;
10	background-color: red;
11}
12
13.fixed{
14	background-attachment: fixed;
15	background-color: green;
16}
17
18.local{
19	background-attachment: local;
20}
21
22

実行結果の画像です。

（rocallの下は切れています。）

追記
回答有難うございます。

動画教材で学習しています。
（ユーチューブのテックアカデミーより。はじめてのCSS入門講座、7-2 背景の指定の応用（CSSの背景））
（下記URLがその動画教材です。）
background-attachmentが効いてないと思った理由：
background-attachmentを指定しても動画教材と同じようになりませんでした。

URL:https://www.youtube.com/watch?v=qLtkTxXXsR8&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=31&t=441s

HTMLのファイルがは2つ作成していて、そのうちの一つしか記載しておりませんでした。
もう一つのHTMLファイルが下記（HTML2）です。
こちらのファイルも少し問題があり、下記URLで質問しておりました。
URL:https://teratail.com/questions/249651?nli=5e7d2ccf-b380-4501-880e-44570a280322#reply-361111
rocall→localに修正しました。ご指摘有難うございます。

HTML2
1<!doctype html>
2
3<html  lang="ja">
4<head>
5	<meta charaset="UTF-8">
6	<title>文字のスタイルについての練習</title>
7	<link rel="stylesheet" href="page-styles.css">
8	<link rel="stylesheet" href="style.css">
9	<link rel="stylesheet" href="./style.css" type="text/css">
10
11</head>
12<body>
13	<div class="box">
14	</div>
15</body>
16</html>

s8_chu

2020/03/26 22:49

なぜ `background-attachment` プロパティが効いていないと思ったのか、もう少し詳しく教えていただけませんか？また、背景画像を設定している `.box` クラスが HTML 中に表れていませんが、これは質問者さんの意図どおりでしょうか？

Yorrie

2020/03/27 01:21

1. `.box`クラスがHTML内のどこにあるのかを明示してください！ 2. HTML内の`.rocall`クラスは恐らく`.local`の誤字だと思うので修正をお願いします。

行動規範の内容に同意します

回答1件

background-attachmentを指定しても動画教材と同じようになりませんでした。

質問文の動画を観ると、動画内の CSS で背景画像を設定していないにも関わらず背景画像が描画されていることから、動画内で解説のために別途装飾を適用している可能性があります。動画の 7 分 12 秒付近で page-styles.css という CSS ファイルの存在を確認出来、このファイルで背景画像などの設定をしていると考えられます。ここで、背景画像の装飾が行える .box クラスはいずれの要素にも設定していないため、今回の動作結果に何の影響も及ぼさないことに注意する必要があります。

以下のように、追加で background-image, overflow プロパティなどの装飾を行うことで、当該動画と同様の動作が確認出来ます (動作確認用リンク)。

CSS
1body {
2  background: #2a2a2a;
3}
4
5div {
6  background-image: url('https://i.picsum.photos/id/684/1280/800.jpg');
7  width: 500px;
8  height: 500px;
9  overflow-y: scroll;
10}
11
12.attch + .attch {
13  margin-top: 50px;
14}
15
16.scroll {
17  background-attachment: scroll;
18  background-color: red;
19}
20
21.fixed {
22  background-attachment: fixed;
23  background-color: green;
24}
25
26.local {
27  background-attachment: local;
28}