サイトの背景をイメージ画像にしてスライドショーしコンテンツのみを動かしたい

実現したいこと

・サイトの全体の背景をイメージ画像にしてスライドショー
・ユーザーが開いたときの画面サイズで固定（縦横100％）
・スクロールした時にコンテンツが動く仕様にしたい
・スクロールした時に背景画像が少し暗くなりコンテンツが目立つようにしたい

前提

上記の動きのあるサイトを制作しています。
jQueryプラグインbgSwitcherを使ってサイトの全体の背景をイメージ画像にしてスライドショーをすることはできたのですが、コンテンツが長くると背景の画面サイズを固定することができず困っています。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>bgSwitcher</title>
6    <link rel="stylesheet" type="text/css" href="css/bgSwitcher.css">
7    <link rel="stylesheet" type="text/css" href="css/main.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9</head>
10
11<body>
12<div class="bgimg-slider">
13<div class="wrap">  
14  <header>
15    <h1 class="logo">
16      <img src="images/logo2.png" alt="">
17    </h1>
18    <main>
19      <section class="m_con_01">テキストテキストテキスト</section>
20        <section class="m_con_01">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス</section>
21    </main>
22  </header>
23</div>
24</div>
25
26<!-- bgswitcher-script -->
27<script src="js/jquery.bgswitcher.js"></script>
28<script>
29    jQuery(function($) {
30     $('.bgimg-slider').bgSwitcher({
31      images: ['images/bg01.jpg','images/bg02.jpg','images/bg03.jpg'],
32      effect: "fade",
33      easing: "linear",
34      interval: "8000",
35    　
36     });
37    });
38</script>
39<!-- bgswitcher-script-end -->
40</body>
41</html>

bgSwitcher.css
1.bgimg-slider {
2    width: 100vw;
3    height: 100vh;
4    background-position: center center;
5    background-size: cover;
6    display: flex;
7     justify-content: center;
8
9}

main.css
1@charset "utf-8";
2/* CSS Document */
3
4body{
5    margin: 0;
6    padding: 0;
7}
8
9.wrap{
10    width: 700px;
11    margin: 0 auto;
12    text-align: center;
13}
14
15
16header{
17    display: block;
18}
19
20h1.logo {
21    margin-top: 50px;
22}
23
24h1.logo img{
25    margin: 0 auto;
26    text-align: center;
27}
28
29
30.m_con_01{
31    background-color: #fff;
32    padding: 20px;
33    opacity: 0.5
34}

試したこと

bgSwitcher.CSS内の
.bgimg-sliderに対して
background-attachment: fixed;やposition: fixed;を記載して試したのですがうまくいきませんでした。

補足

該当のjquery.bgswitcher.jsは、jqueryプラグイン(bgswitcher)のダウンロードしたものをそのままコピペしています。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.bgimg-slider {
2    overflow-y: scroll;
3}

とするか、

css
1body>div:first-child { /* セレクタはHTMLに合わせて書き換える */
2    position: fixed !important;
3}

とすると、どうでしょうか。

投稿2023/08/22 09:31

Lhankor_Mhy

総合スコア37421

tt_360

2023/08/23 00:00

すごいです！ありがとうございます(T_T) 上も下も両方いけました。とても助かりました。ありがとうございますm(_ _)m

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

サイトの背景をイメージ画像にしてスライドショーしコンテンツのみを動かしたい

実現したいこと

前提

該当のソースコード

試したこと

補足

関連した質問