teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問imgタグを使って背景画像として固定したい

編集履歴

質問編集履歴

7

文法の修正

2021/04/10 10:45

投稿

Ryoma2001
Ryoma2001

スコア2

test CHANGED
File without changes
test CHANGED
@@ -22,11 +22,47 @@
22
22
 
23
23
  ```HTML
24
24
 
25
-
25
+ <!DOCTYPE html>
26
+
26
-
27
+ <html lang="ja">
28
+
29
+
30
+
27
-
31
+ <head>
32
+
28
-
33
+ <meta charset="UTF-8">
34
+
35
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
36
+
37
+ <meta name="description" content="プロサーファー松下諒大のサーフィンスクール　ホームポイントは湯河原・吉浜です。ステップアップに悩んでる方僕と一緒にサーフィンを上達させましょう。">
38
+
39
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
40
+
41
+ <meta http-equiv="Pragma" content="no-cache">
42
+
43
+ <meta http-equiv="Cache-Control" content="no-cache">
44
+
45
+ <link rel="stylesheet" href="css/animate.css">
46
+
47
+ <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
48
+
49
+ <!-- スライドショー -->
50
+
51
+ <link rel="stylesheet" href="./css/vegas.min.css">
52
+
53
+ <link rel="stylesheet" href="css/index.css" />
54
+
55
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
56
+
57
+ <title>【公式】</title>
58
+
29
- </header>
59
+ </head>
60
+
61
+
62
+
63
+ <body>
64
+
65
+
30
66
 
31
67
 
32
68
 
@@ -40,13 +76,15 @@
40
76
 
41
77
  </a>
42
78
 
43
- <video class="mv-bg" src="./css/サーフィン動画Top.mp4" autoplay playsinline muted loop></video>
79
+ <video class="mv-bg" src="./css/639728877.566801.mp4" autoplay playsinline muted loop></video>
80
+
81
+
44
82
 
45
83
  <div class="mv-content">
46
84
 
47
- <p class="title_en fede en_txt">Ride the waves</p>
85
+ <p class="title_en fede en_txt">デモサイト</p>
48
-
86
+
49
- <div class="bg-slider__title fede">～サーフィンをもっと楽しく～</div>
87
+ <div class="bg-slider__title fede">デモサイトです</div>
50
88
 
51
89
  </div>
52
90
 
@@ -54,7 +92,7 @@
54
92
 
55
93
  <div style="background:#FFF;">
56
94
 
57
-
95
+
58
96
 
59
97
  <!--　ギャラリー -->
60
98
 
@@ -64,33 +102,63 @@
64
102
 
65
103
  <h1 class="fadein en_txt">GALLERY</h1>
66
104
 
105
+ <h1>ここにスライダーで背景画像とパララックスのようにしたい。</h1>
106
+
107
+ <h1>ファーストビューのような背景画像が固定されているようなパララックスをしたい</h1>
108
+
67
109
  <h2 class="fadein"> × gallery </h2>
68
110
 
69
111
  </div>
70
112
 
71
113
  <div class="gallery_inner">
72
114
 
73
-
115
+ </div>
116
+
74
-
117
+ </div>
118
+
119
+ </div>
120
+
121
+ <!-- トピックス -->
122
+
123
+ <div style="background:#FFF;">
124
+
125
+ <div class="section-wrapper" id="news">
126
+
75
- 　　　　　**ここの背景画像をスライダーにしつつパララックス風にしたい
127
+ <div class="fadein">
128
+
76
-
129
+ <h1 class="fadein en_txt">NEWS & TOPICS</h1>
130
+
131
+ <h2 class="fadein">× news × topics</h2>
132
+
133
+ </div>
134
+
135
+ <div class="section-inner">
136
+
77
- 　　　　　　background-attachment fixedを使ったときのような背景画像にしたいが、IOSだとうまく反映されない**
137
+ <h3 class="section-title fadein">最新情報</h3>
138
+
78
-
139
+ <div class="news-wrapper">
140
+
79
-
141
+ <dl class="news-list">
142
+
143
+ </dl>
80
144
 
81
145
  </div>
82
146
 
83
- </div>
147
+ </div>
148
+
149
+ </div>
150
+
151
+ </div>
84
152
 
85
153
  <!-- スクール -->
86
154
 
87
- <div class="school-wrapper" id="school">
155
+ <div class="school-wrapper" id="school">
88
156
 
89
157
  <div class="school-container fadein">
90
158
 
91
159
  <h1 class="fadein en_txt">SURFING SCHOOL</h1>
92
160
 
93
- <h2 class="fadein">School × Coaching × </h2>
161
+ <h2 class="fadein">School × Coaching ×</h2>
94
162
 
95
163
  <div class="school-message fadein">
96
164
 
@@ -112,8 +180,18 @@
112
180
 
113
181
  </div>
114
182
 
183
+ <div class="school-bottom">
184
+
185
+
186
+
187
+ </div>
188
+
115
189
  <!-- フッター -->
116
190
 
191
+ <div style="background:#FFF;">
192
+
193
+
194
+
117
195
  <footer>
118
196
 
119
197
  <div class="footer-menu">
@@ -134,10 +212,16 @@
134
212
 
135
213
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
136
214
 
215
+
216
+
137
217
  <!-- スライドショー -->
138
218
 
139
219
  <script script type="text/javascript" src="./js/vegas.min.js"></script>
140
220
 
221
+ <script src="js/jquery.textillate.js"></script>
222
+
223
+ <script src="js/jquery.lettering.js"></script>
224
+
141
225
  <script type="text/javascript" src="js/index.js"></script>
142
226
 
143
227
  </body>
@@ -146,6 +230,10 @@
146
230
 
147
231
  </html>
148
232
 
233
+
234
+
235
+
236
+
149
237
  ```
150
238
 
151
239
  ```css
@@ -164,6 +252,16 @@
164
252
 
165
253
  }
166
254
 
255
+ .gallery_inner img{
256
+
257
+ height: 50vh;
258
+
259
+ min-height: 550px;
260
+
261
+ object-fit: cover;
262
+
263
+ }
264
+
167
265
  ```
168
266
 
169
267
  ```jQuery

6

文字の追加

2021/04/10 10:45

投稿

Ryoma2001
Ryoma2001

スコア2

test CHANGED
File without changes
test CHANGED
@@ -10,11 +10,9 @@
10
10
 
11
11
 
12
12
 
13
- こちらのサイトのように背景画像を固定したいです
13
+ **こちらのデモサイトをご覧いただきたいです**
14
14
 
15
- [リンク内容](https://www.aki-same.net/test/parallax/)
15
+ [リンク内容](http://xs689094.xsrv.jp/Matushita%20Ryota/)
16
-
17
- こちらのサイトのように背景画像を固定したいです
18
16
 
19
17
 
20
18
 

5

文字の追加

2021/04/10 06:32

投稿

Ryoma2001
Ryoma2001

スコア2

test CHANGED
File without changes
test CHANGED
@@ -24,37 +24,167 @@
24
24
 
25
25
  ```HTML
26
26
 
27
- <ul id="slider">
28
27
 
29
- <li><img src="./css/img/gallery1.jpg" alt=""></li>
30
28
 
31
- <li><img src="./css/img/gallery2.jpg" alt=""></li>
32
29
 
33
- <li><img src="./css/img/gallery3jpg.jpg" alt=""></li>
34
30
 
31
+ </header>
32
+
33
+
34
+
35
+ <div class="bg-slider">
36
+
37
+ <a href="#movie" id="rect">
38
+
39
+ <span class="arrow_line fede"></span>
40
+
41
+ <span class="arrow_txt fede en_txt">Scroll</span>
42
+
35
- </ul>
43
+ </a>
44
+
45
+ <video class="mv-bg" src="./css/サーフィン動画Top.mp4" autoplay playsinline muted loop></video>
46
+
47
+ <div class="mv-content">
48
+
49
+ <p class="title_en fede en_txt">Ride the waves</p>
50
+
51
+ <div class="bg-slider__title fede">～サーフィンをもっと楽しく～</div>
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ <div style="background:#FFF;">
58
+
59
+
60
+
61
+ <!--　ギャラリー -->
62
+
63
+ <div class="gallery-wrapper" id="gallery">
64
+
65
+ <div class="fadein">
66
+
67
+ <h1 class="fadein en_txt">GALLERY</h1>
68
+
69
+ <h2 class="fadein"> × gallery </h2>
70
+
71
+ </div>
72
+
73
+ <div class="gallery_inner">
74
+
75
+
76
+
77
+ 　　　　　**ここの背景画像をスライダーにしつつパララックス風にしたい
78
+
79
+ 　　　　　　background-attachment fixedを使ったときのような背景画像にしたいが、IOSだとうまく反映されない**
80
+
81
+
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ <!-- スクール -->
88
+
89
+ <div class="school-wrapper" id="school">
90
+
91
+ <div class="school-container fadein">
92
+
93
+ <h1 class="fadein en_txt">SURFING SCHOOL</h1>
94
+
95
+ <h2 class="fadein">School × Coaching × </h2>
96
+
97
+ <div class="school-message fadein">
98
+
99
+ <p>「少し経験したけど難しくて楽しくなかった。」から「サーフィンってこんなに楽しいんだ！」へ<br>
100
+
101
+ 「基本マニューバー（リッピング・カービング・カットバック等）を中心にエアリアル等の高等テクニックまで」<br>
102
+
103
+ ライフスタイルであるサーフィンをもっと楽しくなるようにサポートさせて頂きます。</p>
104
+
105
+ </div>
106
+
107
+ <div class="school-btn fadein">
108
+
109
+ <a href="php/contact.php" class="btn">スクール ＆ コーチング & 各種問い合わせはこちら</a>
110
+
111
+ </div>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ <!-- フッター -->
118
+
119
+ <footer>
120
+
121
+ <div class="footer-menu">
122
+
123
+ <p>©ryota.matsushita.surfingschool.com ALL RIGHTS RESERVED.</p>
124
+
125
+ </div>
126
+
127
+ </footer>
128
+
129
+ </div>
130
+
131
+
132
+
133
+
134
+
135
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
136
+
137
+ <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
138
+
139
+ <!-- スライドショー -->
140
+
141
+ <script script type="text/javascript" src="./js/vegas.min.js"></script>
142
+
143
+ <script type="text/javascript" src="js/index.js"></script>
144
+
145
+ </body>
146
+
147
+
148
+
149
+ </html>
150
+
151
+ ```
152
+
153
+ ```css
154
+
155
+ .gallery_inner{
156
+
157
+ width: 100vw;
158
+
159
+ height: 100vh;
160
+
161
+ min-height: 550px;
162
+
163
+ background-size: cover;
164
+
165
+ background-position: center;
166
+
167
+ }
36
168
 
37
169
  ```
38
170
 
39
171
  ```jQuery
40
172
 
41
- $('#slider').slick({
173
+ $(function() {
42
174
 
43
- autoplay:true,
175
+ $('.gallery_inner').vegas({
44
176
 
45
- autoplayspeed:2000,
177
+ slides: [
46
178
 
47
- fade:true,
179
+ { src: './css/img/gallery1.jpg' },
48
180
 
49
- speed:1000,
181
+ { src: './css/img/gallery2.jpg' },
50
182
 
51
- cssEase:'linear',
183
+ { src: './css/img/gallery3jpg.jpg' },
52
184
 
53
- pauseOnFocus: false,
185
+ ],
54
186
 
55
- pauseOnHover: false,
187
+ });
56
-
57
- pauseOnDotsHover: false
58
188
 
59
189
  });
60
190
 

4

文字の追加

2021/04/10 06:07

投稿

Ryoma2001
Ryoma2001

スコア2

test CHANGED
File without changes
test CHANGED
@@ -12,9 +12,9 @@
12
12
 
13
13
  こちらのサイトのように背景画像を固定したいです
14
14
 
15
- [リンク内容](https://www.beckett.design/)
15
+ [リンク内容](https://www.aki-same.net/test/parallax/)
16
16
 
17
- こちらのサイトで羽が生えているスマホのように背景画像を固定したいです
17
+ こちらのサイトのように背景画像を固定したいです
18
18
 
19
19
 
20
20
 

3

文字の追加

2021/04/10 03:06

投稿

Ryoma2001
Ryoma2001

スコア2

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,10 @@
3
3
 
4
4
 
5
5
  そのためbackground-imgでそれを固定するのではなく、imgタグで指定している画像を固定したいです。
6
+
7
+
8
+
9
+ **ほかの方法でスライダーで画像を表示してそれを下記のURLのように背景画像として固定する方法でも構いません！**
6
10
 
7
11
 
8
12
 

2

書式の改善

2021/04/10 02:34

投稿

Ryoma2001
Ryoma2001

スコア2

test CHANGED
File without changes
test CHANGED
File without changes

1

文法の修正

2021/04/10 02:15

投稿

Ryoma2001
Ryoma2001

スコア2

test CHANGED
@@ -1 +1 @@
1
- slick sliderの画像をパララックスにする方法
1
+ imgタグを使って背景画像として固定したい
test CHANGED
@@ -1,4 +1,16 @@
1
1
  サイトを制作しているのですが、slick sliderでスライダーを作成しました。それをパララックス風にしたいです。
2
+
3
+
4
+
5
+ そのためbackground-imgでそれを固定するのではなく、imgタグで指定している画像を固定したいです。
6
+
7
+
8
+
9
+ こちらのサイトのように背景画像を固定したいです
10
+
11
+ [リンク内容](https://www.beckett.design/)
12
+
13
+ こちらのサイトで羽が生えているスマホのように背景画像を固定したいです
2
14
 
3
15
 
4
16