cssを使用した背景画像の挿入と、その上に透かしの背景色を置く方法を教えてください。

html
1html
2css　（CSSのファイルは全て同一）
3* {
4  padding: 0;
5  margin: 0;
6}
7
8html,
9body {
10  width: 100%;
11  height:100%;
12}
13
14.bg_img {//背景画像にpc画面いっぱいに表示して固定・no repeatの機能を追加しています。
15  background: url("doraemon_background_1.png");
16  background-size: cover;
17  height: 100vh;
18  background-attachment: fixed;
19}
20
21.sample {
22  background-color: rgba(255, 255, 255, 0.5);
23  height: 100%;
24  width: 50%; /* 透かしにする背景色の横の長さはここで調整 */
25  margin: 0 auto;
26  animation: change-bgcolor 60s cubic-bezier(0, 1, 0, 1) infinite;
27}
28
29@keyframes change-bgcolor {
30  25% {
31    background-color: rgba(255, 255, 255, 0.5);
32  }
33  50% {
34    background-color: rgba(255, 0, 0, 0.5);
35  }
36  75% {
37    background-color: rgba(0, 255, 0, 0.5);
38  }
39  100% {
40    background-color: rgba(0, 0, 255, 0.5);
41  }
42}
43
44
45html
46
47
48<body>
49
50
51    <script>
52    MQTTconnect();
53    </script>
54	<div class="bg_img">
55	<div class="bg_img::after">
56	<div class="sample">
57<h2> タイトル</h2>
58
59    <p>
60    現在の時刻： {{now}}
61    </p> 
62    CloudMQTT 接続 Status： <div id="status">Connection Status: Not Connected</div>
63    <br>
64
65
66	<h2 id="example2">　　</h2>
67    <figure>
68    <p><img id="a_signal" src="写真" WIDTH = "700px" HEIGHTl = "500px"></p>    
69    </figure>
70    <br>
71	<h2 id="example2">　　</h2>
72	<font size = "7" color="#F00">文字</font>
73	<br>
74	
75	<p><a href="#example"><font size = "6">↓↓↓文字↓↓↓</font></a></p>
76	
77	<p>
78      <div style="margin-bottom:1000px"></div><font size = "6" color="#000"></font>
79    </p>
80	
81
82	
83	
84	<h2 id="example">　　</h2>
85	文字：<p id="messages"></p>
86    <figure>
87    <img id="trafic_signal" src="写真" WIDTH = "700px" HEIGHTl = "500px">
88    </figure>
89    <br>
90    
91    <p>
92	<input type="button" value="文字" onclick="clickBtn(&quot;BLUE&quot;)" style="font-size:28px; color:#ffffff;background-color:#4EE27F;WIDTH:350px; HEIGHT:80px;"/>
93    <input type="button" value="文字" onclick="clickBtn(&quot;RED&quot;)" style="font-size:28px; color:#000000;background-color:#FF0000;WIDTH:350px; HEIGHT:80px;"/><br>
94    <input type="button" value="文字" onclick="clickBtn(&quot;YELLOW&quot;)" style="font-size:28px; color:#000000;background-color:#FFFF00;WIDTH:700px; HEIGHT:80px;"/>
95        <p><font size = "6">文字</font></p>
96    <input type="button" value="文字" onclick="clickBtn3(&quot;A&quot;)" style="font-size:24px; color:#ffffff;background-color:#000000;WIDTH:96px; HEIGHT:72px;"/>
97    <input type="button" value="文字" onclick="clickBtn3(&quot;B&quot;)" style="font-size:24px; color:#000000;background-color:#ffffff;WIDTH:96px; HEIGHT:72px;"/>
98    <input type="button" value="文字" onclick="clickBtn3(&quot;C&quot;)" style="font-size:24px; color:#ffffff;background-color:#000000;WIDTH:96px; HEIGHT:72px;"/>
99    <input type="button" value="文字" onclick="clickBtn3(&quot;D&quot;)" style="font-size:24px; color:#000000;background-color:#ffffff;WIDTH:96px; HEIGHT:72px;"/>
100    <input type="button" value="文字" onclick="clickBtn3(&quot;E&quot;)" style="font-size:24px; color:#ffffff;background-color:#000000;WIDTH:96px; HEIGHT:72px;"/>
101    <input type="button" value="文字" onclick="clickBtn3(&quot;F&quot;)" style="font-size:24px; color:#000000;background-color:#ffffff;WIDTH:96px; HEIGHT:72px;"/>
102    </p>
103
104	
105	<p>
106      <div style="margin-bottom:2000px"></div>
107    </p>
108	
109	
110	
111	
112
113    <figure>
114    <legend> 文字 </legend>
115    <img id="c_signal" src="写真" WIDTH = "700px" HEIGHTl = "500px">
116    </figure>
117    <br>
118    <input type="button" value="文字" onclick="clickBtn(&quot;RED&quot;)" style="font-size:28px; color:#000000;background-color:#FFFF00;WIDTH:700px; HEIGHT:80px;"/>
119    
120    <p><a href="#example2"><font size = "6">↑↑↑一番上に戻る↑↑↑</font></a></p>
121	</div>
122	</div>
123	</div>
124	<!--</div>
125	</div>-->

言語：html css
プログラミング歴：1週間ほど
使用サイト：heroku
サクラエディタ

実現したいこと
１heroku上に背景画像をpcの画面サイズで表示（画面上に固定）
２その上に中央揃えで背景色の透かしを置く
（サイズは縦はサイト内の上から下まで全て、横はpc画面の半分程度）
３、２の背景色の上に画像や文字を置きたいです。

これができたら15秒程度で背景画像が変化する機能も実装したいです。

発生している問題・エラーメッセージ

１、画像の挿入はできたが、画像を全て表示せずに、1部分（左半分）を拡大している状態。
２、透かしを入れることはできたが、透かしにする背景色の横の長さが調整できない。
leftやrightの数値を変更すると、後ろの背景画像も一緒に動いてしまう。
３、コンテンツの中央揃えはできました。

該当のソースコード

試したこと

css　内のrelativeやmarginを変更や追加をした。
after内の要素を変更して背景色の位置を動かすと、下の背景画像も一緒に動く。

補足情報（FW/ツールのバージョンなど）

m.ts10806

2019/07/08 06:08

herokuはサイトではなくあくまでプラットフォームの総称では。ひとまずコードはマークダウンのcode機能を利用してご提示ください。

m.ts10806

2019/07/08 06:16

https://teratail.com/help#about-markdown

m.ts10806

2019/07/08 06:47

本件とは関係ないのでこちらに書きますが、下記、本当にそうなってます？ ("F") HTMLエスケープ入ってしまってますね。

neison

2019/07/08 07:55

ご回答ありがとうございます。 2点ほど質問なのですが、　・スクロールすると背景画像と背景色が機能せず、真っ白になってしまう現象（文字と画像は表示される）はどうすれば解決するでしょうか？　→body等のheightの数値を変更すると下に伸びるのですが、それだと背景画像が画面サイズより小さくrepeatされてしまいます。　→cssのbe_imgの部分は背景画像にno-repeatと、画面上に固定する機能が欲しかったので編集しております。　・ご指摘頂いた("F")はクラウドとデバイス上では問題なく動いているのですが、　　HTMLエスケープに入ると何か問題でもあるのでしょうか？　　素人で知識不足のため教えて頂けると幸いです。

m.ts10806

2019/07/08 08:01

こちらは回答ではなく質問への追記修正依頼のコメント欄です。質問に補足してほしいことや確認のためにこちらにコメントしています。 1点目：これは質問本編と関わることなので、割愛させていただきます。まずは先についた回答をご確認ください。 2点目：見たところJavaScriptのonclickイベントをfunctionに飛ばしているようですが、本当に"となっているのでしたら引数が正しく認識されませんのでJavaScriptのエラーが出ると思います。もし実際は' となっているのでしたら、なるべく実際とあわせてもらったほうが見ているほうも混乱しなくてすみます。

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

回答1件

ベストアンサー

HTML
1<div class="bg_img">
2  <div class="sample">
3    コンテンツの中身
4  </div>
5</div>

CSS
1* {
2  padding: 0;
3  margin: 0;
4}
5
6html, body {
7  width: 100%;
8  height: 100%;
9}
10
11.bg_img {
12  background: url("http://placehold.jp/24/cc9999/cc9999/150x150.png");
13  width: 100%;
14  height: 100%;
15}
16
17.sample {
18  background-color: rgba(255, 255, 255, 0.5);
19  height: 100%;
20  width: 50%; /* 透かしにする背景色の横の長さはここで調整 */
21  margin: 0 auto;
22  animation: change-bgcolor 60s cubic-bezier(0, 1, 0, 1) infinite;
23}
24
25@keyframes change-bgcolor {
26  25% {
27    background-color: rgba(255, 255, 255, 0.5);
28  }
29  50% {
30    background-color: rgba(255, 0, 0, 0.5);
31  }
32  75% {
33    background-color: rgba(0, 255, 0, 0.5);
34  }
35  100% {
36    background-color: rgba(0, 0, 255, 0.5);
37  }
38}
39