IOSでの背景固定表示について

Question

前提・実現したいこと

スマホでも背景を固定しパララックス効果を出したい。
【補足】
背景固定したい箇所が二箇所あるので、PC表示は「background-attachment: fixed;」と「background-size: cover;」で背景固定し、
iPad以下は「position:fixed;」を使って一箇所のみ背景固定にしようと考えています。

発生している問題・エラーメッセージ

PC用の「background-size: cover;」が影響してスマホで見た時に背景がドアップ＆固定されてしまう。上記を消すとスマホでも背景固定されるのだが、PCウィンドウ幅1440くらいになると端が足りず背景画像が途切れてしまう。

該当のソースコード

<section class="conC">
    <div class="container">
        <h3>テキスト</h3>
    </div>
</section>

.conC {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)), url(../img/bg2.jpg);
	background-position: right top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/* スマホ　背景固定　*/
@media (max-width:768px){
    .conC:before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url(../img/s-bg2.jpg) no-repeat right top;
    background-size: 100% auto;
}
}

試したこと

PC用に下記を記述
・「background-size: cover;」を消し、「width:100%」を設定→ダメ元だったがやはりダメ
・「z-index:-2」を記述→効果なし

Answer 1

下記のリンク先が参考になるかも？

background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう

Comments

[ElicitCd]

ご回答ありがとうございます。説明が不足していたのですが、背景固定したい箇所が実は二箇所あるので、PCは「background-attachment: fixed;」と「background-size: cover;」で背景固定し、iPad以下は「position:fixed;」を使って一箇所のみ背景固定にしようと考えていました。

[hatena19]

HTMLがないと検証できないので、それを提示した方がいいかも。

[ElicitCd]

そうですね...!
HTMLを追記しました。