teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

今の問題について画像を追加

2019/07/09 05:39

投稿

neison
neison

スコア13

title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,11 @@
18
18
  →下にスクロールしても、背景が画像がちゃんと付いてくる(fixed)。
19
19
  ![イメージ説明](bfa55807f2325c52576c9331f28c31ae.png)
20
20
  ### 今の問題
21
-    
21
+ 追加
22
+ ・背景画像が灰色になった
23
+ ・コンテンツ(紫の透かし)が左寄りになり、サイトの1番下まで行かず途切れている。
24
+ ![イメージ説明](b47722c2dea2049f0d9ca4c1375bbee6.png)   
25
+
22
26
  ・回答のコードを試しましたが、下記の様な状態になっています。
23
27
   →切り替えの画像がテキストの上に来てしまう。
24
28
   →背景画像の切り替えは紫の透かしの下で行いたい

4

実現したいことを整理しました。

2019/07/09 05:38

投稿

neison
neison

スコア13

title CHANGED
File without changes
body CHANGED
@@ -7,20 +7,23 @@
7
7
    →背景画像はfixedを使いスクロールしても途切れない状態
8
8
    →背景画像のサイズはpc画面ちょうど。
9
9
 
10
+ 完成イメージとしては、下記の画像で表示している青空の背景画像を(現在は.bg_img で背景を表示)
11
+ 10秒程度で、他の画像(.bg_img .src1内にあるURLのやつ)に変更可能にしたいです。
12
+ html,cssの構造?は背景画像の切り替えができれば変更しても構いません。
13
+ →cssのsample以下は透かしの背景色を調整しているので、そのまま機能を残したいです。
14
+
15
+ ・背景画像の表示は
16
+  →透かしの下に置く
17
+  →1枚の画像で画面サイズにcoverする様に表示(norepeat)
18
+ →下にスクロールしても、背景が画像がちゃんと付いてくる(fixed)。
19
+ ![イメージ説明](bfa55807f2325c52576c9331f28c31ae.png)
10
20
  ### 今の問題
11
- 背景画像が切り替わらない。
12
-  上の背景画像をpc画面ぴったりの大きさで、スクロールしても途切れない状態はできましたが、
13
-  時間で背景画像を切り替えようとすると上手くいきません。
14
- __  →サイトを開いている時に自動で10秒毎に永遠と切り替えたいのですが、
15
-    現状だと背景画像が固定のままで変化しない状態です。
16
-    cssの.bg_img{}内にある
17
- 「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
18
-   それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
19
21
     
20
22
  ・回答のコードを試しましたが、下記の様な状態になっています。
21
23
   →切り替えの画像がテキストの上に来てしまう。
22
24
   →背景画像の切り替えは紫の透かしの下で行いたい
23
25
   →赤信号の様にrepeatせず、後ろの空の画像の様に1枚で画面をcoverできるようにしたい。
26
+
24
27
  ![イメージ説明](320382e44cfbb2f8f699a6215ccb9ac6.png)
25
28
 
26
29
  ```html

3

問題が発生している箇所のスクショを追加しました。

2019/07/09 05:13

投稿

neison
neison

スコア13

title CHANGED
File without changes
body CHANGED
@@ -17,6 +17,11 @@
17
17
  「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
18
18
    それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
19
19
     
20
+ ・回答のコードを試しましたが、下記の様な状態になっています。
21
+  →切り替えの画像がテキストの上に来てしまう。
22
+  →背景画像の切り替えは紫の透かしの下で行いたい
23
+  →赤信号の様にrepeatせず、後ろの空の画像の様に1枚で画面をcoverできるようにしたい。
24
+ ![イメージ説明](320382e44cfbb2f8f699a6215ccb9ac6.png)
20
25
 
21
26
  ```html
22
27
  </head>

2

記載して頂いたコードに変更しました。

2019/07/09 04:30

投稿

neison
neison

スコア13

title CHANGED
File without changes
body CHANGED
@@ -55,7 +55,7 @@
55
55
  background-attachment: fixed;
56
56
  overflow : hidden;
57
57
  }
58
- .be_img .hat
58
+ .bg_img .hat{
59
59
  position : absolute;
60
60
  top : 0;
61
61
  left : 0;
@@ -65,22 +65,21 @@
65
65
  animation : bgAnime 40s infinite;
66
66
  }
67
67
 
68
- .be_img .src1 {
68
+ .bg_img .src1 {
69
69
  background-image : url("doraemon_background_1.png"); /* 背景の画像を指定 */
70
70
  }
71
- .be_img .src2 {
71
+ .bg_img .src2 {
72
72
  background-image : url("doraemon_kabegami1.png"); /* 背景の画像を指定 */
73
73
  animation-delay : 10s;
74
74
  }
75
- .be_img .src3 {
75
+ .bg_img .src3 {
76
76
  background-image : url("doraemon_background2.png"); /* 背景の画像を指定 */
77
77
  animation-delay : 20s;
78
78
  }
79
- .be_img .src4 {
79
+ .bg_img .src4 {
80
80
  background-image : url("doraemon_kabegami1.png"); /* 背景の画像を指定 */
81
81
  animation-delay : 30s;
82
82
  }
83
-
84
83
  @keyframes bgAnime {
85
84
  0% { opacity: 0; }
86
85
  10% { opacity: 1; }

1

今の問題にどういう現象が発生しているか記載しました。

2019/07/09 04:07

投稿

neison
neison

スコア13

title CHANGED
File without changes
body CHANGED
@@ -11,6 +11,12 @@
11
11
  背景画像が切り替わらない。
12
12
   上の背景画像をpc画面ぴったりの大きさで、スクロールしても途切れない状態はできましたが、
13
13
   時間で背景画像を切り替えようとすると上手くいきません。
14
+ __  →サイトを開いている時に自動で10秒毎に永遠と切り替えたいのですが、
15
+    現状だと背景画像が固定のままで変化しない状態です。
16
+    cssの.bg_img{}内にある
17
+ 「background-image : url("doraemon_background_1.png");」を消すと、背景画像すら表示されなくなります・
18
+   それ以外の文章・画像やその後ろにある背景色の切り替えは正常に機能しています。**__
19
+    
14
20
 
15
21
  ```html
16
22
  </head>
@@ -43,6 +49,7 @@
43
49
  }
44
50
 
45
51
  .bg_img {
52
+ background-image : url("doraemon_background_1.png");
46
53
  background-size: cover;
47
54
  min-height: 100vh;
48
55
  background-attachment: fixed;