teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ヘッダー部分を作成したいのですが画像の上に表示されず要素が隠れてしまうので画像の上に表示させたい。

編集履歴

質問編集履歴

1

タイトルを変更、コードを囲みました。

2020/04/08 16:41

投稿

marosuk
marosuk

スコア4

test CHANGED
@@ -1 +1 @@
1
- ヘッダー部分を作成したいのですがうまくいきません。
1
+ ヘッダー部分を作成したいのですが画像の上に表示されず要素が隠れてしまうので画像の上に表示させたい。
test CHANGED
@@ -26,227 +26,209 @@
26
26
 
27
27
  【HTML】
28
28
 
29
+
30
+
29
- <!DOCTYPE html>
31
+ ```<!DOCTYPE html>```
30
-
32
+
33
+
34
+
31
- <html lang="ja">
35
+ ```<html lang="ja">```
32
-
36
+
33
- <head>
37
+ ```<head>
34
-
38
+
35
- <meta charset="UTF-8">
39
+ ```<meta charset="UTF-8">```
36
-
40
+
37
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
41
+ ```<meta name="viewport" content="width=device-width, initial-scale=1.0">```
38
-
42
+
39
- <link rel="stylesheet" href="css/style.css">
43
+ ```<link rel="stylesheet" href="css/style.css">```
40
-
44
+
41
- <title>Document</title>
45
+ ```<title>Document</title>```
42
-
46
+
43
- </head>
47
+ </head>```
44
-
48
+
45
- <body>
49
+ ```<body>
46
-
50
+
47
- <div class="background-container">
51
+ ``` <div class="background-container">
48
-
49
-
50
-
52
+
51
- <div class="stars"></div>
53
+ ```<div class="stars"></div>```
52
-
54
+
53
- <div class="twinkling"></div>
55
+ ```<div class="twinkling"></div>```
54
-
56
+
55
- <div class="clouds"></div>
57
+ ```<div class="clouds"></div>```
56
-
58
+
57
- </div>
59
+ </div>```
58
-
60
+
59
- </body>
61
+ </body>```
60
-
62
+
61
- </html>
63
+ </html>```
62
-
63
-
64
64
 
65
65
  【CSS】
66
66
 
67
- from {
67
+ ```from {
68
-
68
+
69
- -webkit-transform: translate3d(0px, 0px, 0px);
69
+ -webkit-transform: translate3d(0px, 0px, 0px);}```
70
+
71
+ ```to {
72
+
73
+ -webkit-transform: translate3d(1000px, 0px, 0px);}```
74
+
75
+ ```@-webkit-keyframes move-background {
76
+
77
+ ```from {
78
+
79
+ -webkit-transform: translate3d(0px, 0px, 0px);}```
80
+
81
+ ```to {
82
+
83
+ -webkit-transform: translate3d(1000px, 0px, 0px);}```
84
+
85
+ }```
86
+
87
+ ```@-moz-keyframes move-background {
88
+
89
+ ```from {
90
+
91
+ -webkit-transform: translate3d(0px, 0px, 0px);}```
92
+
93
+ ```to {
94
+
95
+ -webkit-transform: translate3d(1000px, 0px, 0px);}```
96
+
97
+ }```
98
+
99
+ ```@-webkit-keyframes move-background {
100
+
101
+ ```from {
102
+
103
+ -webkit-transform: translate3d(0px, 0px, 0px);}```
104
+
105
+ ```to {
106
+
107
+ -webkit-transform: translate3d(1000px, 0px, 0px);}```
108
+
109
+ }```
110
+
111
+ ```.background-container {
112
+
113
+ ```position: fixed;```
114
+
115
+ ```top: 0;```
116
+
117
+ ```left: 0;```
118
+
119
+ ```bottom: 0;```
120
+
121
+ ```right: 0;```
122
+
123
+ ```height: 500px;```
124
+
125
+ }```
126
+
127
+
128
+
129
+ .stars {
130
+
131
+ background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
132
+
133
+ position: absolute;
134
+
135
+ top: 0;
136
+
137
+ bottom: 0;
138
+
139
+ left: 0;
140
+
141
+ right: 0;
142
+
143
+ display: block;
144
+
145
+ z-index: 0;
70
146
 
71
147
  }
72
148
 
73
- to {
74
-
75
- -webkit-transform: translate3d(1000px, 0px, 0px);
76
-
77
- }
78
-
79
- @-webkit-keyframes move-background {
80
-
81
- from {
82
-
83
- -webkit-transform: translate3d(0px, 0px, 0px);
84
-
85
- }
86
-
87
- to {
88
-
89
- -webkit-transform: translate3d(1000px, 0px, 0px);
90
-
91
- }
92
-
93
- }
94
-
95
- @-moz-keyframes move-background {
96
-
97
- from {
98
-
99
- -webkit-transform: translate3d(0px, 0px, 0px);
100
-
101
- }
102
-
103
- to {
104
-
105
- -webkit-transform: translate3d(1000px, 0px, 0px);
106
-
107
- }
108
-
109
- }
110
-
111
- @-webkit-keyframes move-background {
112
-
113
- from {
114
-
115
- -webkit-transform: translate3d(0px, 0px, 0px);
116
-
117
- }
118
-
119
- to {
120
-
121
- -webkit-transform: translate3d(1000px, 0px, 0px);
122
-
123
- }
124
-
125
- }
126
-
127
- .background-container {
128
-
129
- position: fixed;
130
-
131
- top: 0;
132
-
133
- left: 0;
134
-
135
- bottom: 0;
136
-
137
- right: 0;
138
-
139
- height: 500px;
140
-
141
-
142
-
143
- }
144
-
145
-
146
-
147
- .stars {
148
-
149
- background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
150
-
151
- position: absolute;
152
-
153
- top: 0;
154
-
155
- bottom: 0;
156
-
157
- left: 0;
158
-
159
- right: 0;
160
-
161
- display: block;
162
-
163
- z-index: 0;
164
-
165
- }
166
-
167
-
168
-
169
- .twinkling {
170
-
171
- width: 10000px;
172
-
173
- height: 100%;
174
-
175
- background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
176
-
177
- background-size: 1000px 1000px;
178
-
179
- position: absolute;
180
-
181
- right: 0;
182
-
183
- top: 0;
184
-
185
- bottom: 0;
186
-
187
- z-index: 2;
188
-
189
- -moz-animation: move-background 70s linear infinite;
190
-
191
- -ms-animation: move-background 70s linear infinite;
192
-
193
- -o-animation: move-background 70s linear infinite;
194
-
195
- -webkit-animation: move-background 70s linear infinite;
196
-
197
- animation: move-background 70s linear infinite;
198
-
199
- }
200
-
201
-
202
-
203
- .clouds {
204
-
205
- width: 10000px;
206
-
207
- height: 100%;
208
-
209
- background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
210
-
211
- background-size: 1000px 1000px;
212
-
213
- position: absolute;
214
-
215
- right: 0;
216
-
217
- top: 0;
218
-
219
- bottom: 0;
220
-
221
- z-index: 3;
222
-
223
- -moz-animation: move-background 150s linear infinite;
224
-
225
- -ms-animation: move-background 150s linear infinite;
226
-
227
- -o-animation: move-background 150s linear infinite;
228
-
229
- -webkit-animation: move-background 150s linear infinite;
230
-
231
- animation: move-background 150s linear infinite;
232
-
233
- }
234
-
235
-
236
-
237
- img {
238
-
239
- height: 70vh;
240
-
241
- width: 70vh;
242
-
243
- position: absolute;
244
-
245
- z-index: 3;
246
-
247
- right: 20px;
248
-
249
- }
149
+
150
+
151
+ ```.twinkling {
152
+
153
+ ```width: 10000px;```
154
+
155
+ ```height: 100%;```
156
+
157
+ ```background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;```
158
+
159
+ ```background-size: 1000px 1000px;```
160
+
161
+ ```position: absolute;```
162
+
163
+ ```right: 0;```
164
+
165
+ ```top: 0;```
166
+
167
+ ```bottom: 0;```
168
+
169
+ ```z-index: 2;```
170
+
171
+ ```-moz-animation: move-background 70s linear infinite;```
172
+
173
+ ```-ms-animation: move-background 70s linear infinite;```
174
+
175
+ ```-o-animation: move-background 70s linear infinite;```
176
+
177
+ ```-webkit-animation: move-background 70s linear infinite;```
178
+
179
+ ```animation: move-background 70s linear infinite;```
180
+
181
+ }```
182
+
183
+
184
+
185
+ ```.clouds {
186
+
187
+ ```width: 10000px;```
188
+
189
+ ```height: 100%;```
190
+
191
+ ```background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;```
192
+
193
+ ```background-size: 1000px 1000px;```
194
+
195
+ ```position: absolute;```
196
+
197
+ ```right: 0;```
198
+
199
+ ```top: 0;```
200
+
201
+ ```bottom: 0;```
202
+
203
+ ```z-index: 3;```
204
+
205
+ ```-moz-animation: move-background 150s linear infinite;```
206
+
207
+ ```-ms-animation: move-background 150s linear infinite;```
208
+
209
+ ```-o-animation: move-background 150s linear infinite;```
210
+
211
+ ```-webkit-animation: move-background 150s linear infinite;```
212
+
213
+ ```animation: move-background 150s linear infinite;```
214
+
215
+ }```
216
+
217
+
218
+
219
+ ```img {
220
+
221
+ ```height: 70vh;```
222
+
223
+ ```width: 70vh;```
224
+
225
+ ```position: absolute;```
226
+
227
+ ```z-index: 3;```
228
+
229
+ ```right: 20px;```
230
+
231
+ }```
250
232
 
251
233
  ```ここに言語名を入力
252
234