背景画像を観音開きで開閉したい

現在、ここ（https://themehunt.com/item/1525340-fullscreen-one-page-template）で配布されてるテンプレートをカスタマイズしながら作成しております。そのうち、1ページのみ、背景を観音開きにして中身を見せる方式にしたいと思いまして、イメージに合いそうな記事やプラグイン等を創作したところ、こちら（https://theorthodoxworks.com/web-design/in-half-the-image-only-css/）の方式が見つかり、テストで設置してみました。

デモ画面のように問題なく動作はするのですが、1部ページではなく背景画像が全画面表示され、観音開きで開いたその中に既存ページが全部入っていました。ランディングページなどキャッチで使う用ではないためトップから観音開きは避けたいと思っています。

background指定用にIDを割り振ったりするなど、適用領域を制限したつもりなのですが、観音開きのファイルの効果が強いのか全画面表示に勝てません。1部門の指定領域内での全域表示に抑える方法があれば教えていただけませんでしょうか。

質問がわかりにくいようでしたので追記いたします。

テンプレート標準では

<body class="slider-background">から背景指定が始まりCSSで指定された3枚の背景が切り替わるようになっています。 1ページ目は黒背景でいいので、<body><div id="haikei"> cssでは#haikei {background-color:#000;}と表記し1枚目でdivを閉じました。 3ページ目に<div class="slider-background">とし、スライド背景を3ページ目からに移し変えています。

2ページ目も同様にID別途指定して、そのDIV内で観音開きのhtml貼れば行けそうかなと思いましたが2ページめだけでなくトップ画面が全部観音開きになってしましまして、2ページめだけこの観音開きを入れたいというのが趣旨になります。

ソースコード主要部と思われる箇所を貼り付けましたが、やはりわかりにくいようなのでほぼ同じものを別のところに借りでアップロードしましたのでお手数ですが、こちらで見ていただければ幸いです。
仮アップロード先　

先程</script>の閉じ忘れの件は、すいません記載ミスです。メールフォームで使用する部分で今回の部分と影響ないものとして一部カットして掲載したのですが、一部残ったため閉じ忘れのように見えてしまいました。
その点も含めわかりやすくなればと思いまして、アップロードいたしました。

1ページ目・・・背景　黒のところ
2ページ目・・・背景　青のところ
3ページ目・・・背景切り替えパターンのところの意味です
観音開きの元となる画像が、このドアの画像となります。

各ページのつなぎ目がわかるよう着色いたしました。

beginner_t

2019/07/31 05:44

「適用領域を制限したつもり」というのはどのような変更を加えたのでしょうか？コードを提示頂けますか？

Lhankor_Mhy

2019/07/31 05:50

コードをご提示ください。

Lhankor_Mhy

2019/07/31 07:34

「2ページ目」というのは「pricing ドアセクションテスト」の部分ですか？

peropero

2019/07/31 08:08

はい、そうです。観音開きの先に既存ページテキストやリンクが置ければよいので既存ページを収納できなくても構いません。ここのぺーじだけ観音開きが使いたいだけなのです

Snpy

2019/07/31 08:16 編集

とりあえず、  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> これに閉じダグが付いていないので、以降のコードに影響が出てるのは確実だと思います。あと、余計なお世話かもしれませんが、もう少し回答者が答えやすいように質問の書き方工夫された方がいいと思います。答える以前に内容を理解するのにすごく苦戦します。

Lhankor_Mhy

2019/07/31 08:42

「2ページ目」の「背景」はどの要素ですか？

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

回答1件

ベストアンサー

あまりきちんと検証していませんが、

css
1.gatefold::before, .gatefold::after {
2	content: '';
3	position: absolute; /* ここを変更 */
4	top: 0;
5	width: 100%;
6	height: 100vh;
7	background: url(../img/bg10.jpg) top center no-repeat;
8	background-size: cover;
9	-webkit-transition: all 1s;
10	transition: all 1s;
11	z-index: 1;
12}