imgタグを使って背景画像として固定したい

サイトを制作しているのですが、slick sliderでスライダーを作成しました。それをパララックス風にしたいです。

そのためbackground-imgでそれを固定するのではなく、imgタグで指定している画像を固定したいです。

ほかの方法でスライダーで画像を表示してそれを下記のURLのように背景画像として固定する方法でも構いません！

こちらのデモサイトをご覧いただきたいです
リンク内容

また他にスライダーも画像をパララックスにする方法があれば教えていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="description" content="プロサーファー松下諒大のサーフィンスクール　ホームポイントは湯河原・吉浜です。ステップアップに悩んでる方僕と一緒にサーフィンを上達させましょう。">
8  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9  <meta http-equiv="Pragma" content="no-cache">
10  <meta http-equiv="Cache-Control" content="no-cache">
11  <link rel="stylesheet" href="css/animate.css">
12  <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
13    <!-- スライドショー -->
14    <link rel="stylesheet" href="./css/vegas.min.css">
15  <link rel="stylesheet" href="css/index.css" />
16  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
17  <title>【公式】</title>
18</head>
19
20<body>
21 
22
23  <div class="bg-slider">
24    <a href="#movie" id="rect">
25      <span class="arrow_line fede"></span>
26      <span class="arrow_txt fede en_txt">Scroll</span>
27    </a>
28    <video class="mv-bg" src="./css/639728877.566801.mp4" autoplay playsinline muted loop></video>
29
30    <div class="mv-content">
31      <p class="title_en fede en_txt">デモサイト</p>
32      <div class="bg-slider__title fede">デモサイトです</div>
33    </div>
34  </div>
35  <div style="background:#FFF;">
36 
37    <!--　ギャラリー -->
38    <div class="gallery-wrapper" id="gallery">
39      <div class="fadein">
40        <h1 class="fadein en_txt">GALLERY</h1>
41        <h1>ここにスライダーで背景画像とパララックスのようにしたい。</h1>
42        <h1>ファーストビューのような背景画像が固定されているようなパララックスをしたい</h1>
43        <h2 class="fadein"> × gallery </h2>
44      </div>
45      <div class="gallery_inner">
46      </div>
47    </div>
48  </div>
49    <!-- トピックス -->
50    <div style="background:#FFF;">
51    <div class="section-wrapper" id="news">
52      <div class="fadein">
53        <h1 class="fadein en_txt">NEWS & TOPICS</h1>
54        <h2 class="fadein">× news × topics</h2>
55      </div>
56      <div class="section-inner">
57        <h3 class="section-title fadein">最新情報</h3>
58        <div class="news-wrapper">
59          <dl class="news-list">
60          </dl>
61        </div>
62      </div>
63    </div>
64  </div>
65  <!-- スクール -->
66   <div class="school-wrapper" id="school">
67    <div class="school-container fadein">
68      <h1 class="fadein en_txt">SURFING SCHOOL</h1>
69      <h2 class="fadein">School × Coaching ×</h2>
70      <div class="school-message fadein">
71        <p>「少し経験したけど難しくて楽しくなかった。」から「サーフィンってこんなに楽しいんだ！」へ<br>
72          「基本マニューバー（リッピング・カービング・カットバック等）を中心にエアリアル等の高等テクニックまで」<br>
73          ライフスタイルであるサーフィンをもっと楽しくなるようにサポートさせて頂きます。</p>
74      </div>
75      <div class="school-btn fadein">
76        <a href="php/contact.php" class="btn">スクール ＆ コーチング & 各種問い合わせはこちら</a>
77      </div>
78    </div>
79  </div>
80  <div class="school-bottom">
81
82  </div>
83    <!-- フッター -->
84  <div style="background:#FFF;">
85
86    <footer>
87      <div class="footer-menu">
88        <p>©ryota.matsushita.surfingschool.com ALL RIGHTS RESERVED.</p>
89      </div>
90    </footer>
91  </div>
92
93
94  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
95  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
96  
97  <!-- スライドショー -->
98  <script script type="text/javascript" src="./js/vegas.min.js"></script> 
99  <script src="js/jquery.textillate.js"></script>
100  <script src="js/jquery.lettering.js"></script>
101  <script type="text/javascript" src="js/index.js"></script>
102</body>
103
104</html>
105
106

css
1.gallery_inner{
2  width: 100vw; 
3  height: 100vh;
4  min-height: 550px;
5  background-size: cover;
6  background-position: center;
7}
8.gallery_inner img{
9  height: 50vh;
10  min-height: 550px;
11  object-fit: cover;
12}

jQuery
1$(function() {
2	$('.gallery_inner').vegas({
3			slides: [
4					{ src: './css/img/gallery1.jpg' },
5					{ src: './css/img/gallery2.jpg' },
6					{ src: './css/img/gallery3jpg.jpg' },
7			],		
8	});
9});

Lhankor_Mhy

2021/04/10 02:23

ご提示のサイトの羽が生えているスマホ？はimg要素ではなくて背景画像のようでした。また、slickはパララックス効果で使うのには向いていないと思います。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問