teratail
回答率
85.48%
質問するログイン新規登録
トップHTMLに関する質問画面いっぱいに背景画像を表示したい

編集履歴

回答編集履歴

2

追記

2017/06/29 17:13

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -73,3 +73,169 @@
73
73
  </html>
74
74
 
75
75
  ```
76
+
77
+
78
+
79
+ 追記
80
+
81
+ ---
82
+
83
+ ```HTML
84
+
85
+ <!DOCTYPE html>
86
+
87
+ <html lang="ja">
88
+
89
+ <head>
90
+
91
+ <meta charset="UTF-8">
92
+
93
+ <title>タイトル</title>
94
+
95
+ <style type="text/css">
96
+
97
+ * {
98
+
99
+ margin: 0;
100
+
101
+ padding: 0;
102
+
103
+ }
104
+
105
+
106
+
107
+ html,
108
+
109
+ body {
110
+
111
+ width: 100%;
112
+
113
+ height: 100%;
114
+
115
+ }
116
+
117
+
118
+
119
+ span {
120
+
121
+ font-size: 1.5em;
122
+
123
+ color: #fff;
124
+
125
+ }
126
+
127
+
128
+
129
+ .background {
130
+
131
+ position: fixed;
132
+
133
+ z-index: 0;
134
+
135
+ top: 0;
136
+
137
+ left: 0;
138
+
139
+ width: 100%;
140
+
141
+ height: 100%;
142
+
143
+ }
144
+
145
+
146
+
147
+ .content1 {
148
+
149
+ position: relative;
150
+
151
+ z-index: 2;
152
+
153
+ height: 100%;
154
+
155
+ color: #fff;
156
+
157
+ background-color: rgba(255, 255, 255, .3);
158
+
159
+ }
160
+
161
+
162
+
163
+ .content2 {
164
+
165
+ position: relative;
166
+
167
+ z-index: 3;
168
+
169
+ height: 500px;
170
+
171
+ background-color: #fff;
172
+
173
+ }
174
+
175
+
176
+
177
+ .image1 {
178
+
179
+ position: absolute;
180
+
181
+ z-index: 0;
182
+
183
+ top: 0;
184
+
185
+ left: 0;
186
+
187
+ width: 100%;
188
+
189
+ height: 100%;
190
+
191
+ }
192
+
193
+
194
+
195
+ .footer1 {
196
+
197
+ position: relative;
198
+
199
+ z-index: 3;
200
+
201
+ height: 500px;
202
+
203
+ background-color: rgba(255, 255, 255, .3);
204
+
205
+ }
206
+
207
+ </style>
208
+
209
+ </head>
210
+
211
+ <body>
212
+
213
+ <div class="background">
214
+
215
+ <img class="image1" src="https://placehold.jp/3d4070/ffffff/500x500.png?text=image" alt="image">
216
+
217
+ </div>
218
+
219
+ <section class="content1">
220
+
221
+ <h1>テキスト</h1>
222
+
223
+ </section>
224
+
225
+ <section class="content2">
226
+
227
+ <h1>テキストテキスト</h1>
228
+
229
+ </section>
230
+
231
+ <footer class="footer1">
232
+
233
+ <span>テキストテキストテキスト</span>
234
+
235
+ </footer>
236
+
237
+ </body>
238
+
239
+ </html>
240
+
241
+ ```

1

修正

2017/06/29 17:13

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -16,23 +16,31 @@
16
16
 
17
17
  html {
18
18
 
19
- background: url(https://placehold.jp/3d4070/ffffff/500x500.png?text=image) no-repeat center center fixed;
19
+ background: url(https://placehold.jp/3d4070/ffffff/500x500.png?text=image);
20
20
 
21
- -webkit-background-size: cover;
21
+ -webkit-background-size: 100% 100%;
22
22
 
23
- -moz-background-size: cover;
23
+ -moz-background-size: 100% 100%;
24
24
 
25
- -o-background-size: cover;
25
+ -o-background-size: 100% 100%;
26
26
 
27
- background-size: cover;
27
+ background-size: 100% 100%;
28
28
 
29
29
  }
30
30
 
31
31
 
32
32
 
33
- h1, p {
33
+ h1, h2, p {
34
34
 
35
35
  color: #ffffff;
36
+
37
+ }
38
+
39
+
40
+
41
+ .big {
42
+
43
+ height: 5000px;
36
44
 
37
45
  }
38
46
 
@@ -50,6 +58,16 @@
50
58
 
51
59
  </div>
52
60
 
61
+ <div class="big">
62
+
63
+ <h2>テキスト</h2>
64
+
65
+ <p>テキストテキストテキストテキスト</p>
66
+
67
+
68
+
69
+ </div>
70
+
53
71
  </body>
54
72
 
55
73
  </html>