スマートフォンでパララックスを作ると背景が拡大してしまうのを解消したいです。

現在パララックスサイトを制作しておりますが、スマートフォンで確認すると背景画像がスクロールした時にヘッダーとフッターが縮小することにより、背景に敷いている画像が拡大してしまいます。
こちらを解消したいのですが、なかなかcssで解消できずに困っております。
こちらはcss3で直せるのかJSで直せるのかわかる方いらっしゃいましたらご教授いただけませんでしょうか。
ご協力のほど何卒よろしくお願い致します。

パララックスデモサイト
URL削除しました。ご協力ありがとうございました！


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>parallax demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html,body {
 width: 100%;
 height: 100%;
}
body {
 margin: 0;
 padding: 0;
}
img {
 width: 100%;
 height: auto;
}
p {
 margin: 0;
 padding: 0;
 line-height: 1.5;
}


/* ============================================================== */
/* ======================== 824px以下 =========================== */
/* ============================================================ */

@media screen and (max-width:824px) {

#slider {
 width: 100vw;
 height: 100%;
 background-image: url(../images/mainvisual-01.jpg);
 background-position: top center;
 background-repeat: no-repeat;
 background-size: cover;
 position: fixed;
 top: 0;
 z-index: 0;
}
.content {
 position: absolute;
 top: 100%;
 height: 1000px;
 background-color: #ccc;
}

/* ================================================= */
/* =================== SP END. ==================== */
/* =============================================== */

}


/* ============================================================== */
/* ======================== 825px以上 =========================== */
/* ============================================================ */

@media screen and (min-width:825px) {

#slider {
 width: 100vw;
 height: 100%;
 background-image: url(../images/mainvisual-01.jpg);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
}
.content {
 height: 1000px;
 background-color: #ccc;
}

/* ================================================= */
/* =================== PC END. ==================== */
/* =============================================== */

}
</style>
</head>

<body>

<div id="slider">
</div>
<!-- /#slider -->

<div class="content">
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- /.content -->

</body>
</html>

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

回答1件

拡大というか左右が見切れてしまうのが嫌ということですよね。
background-size: cover;を指定すれば要素を埋め尽くすように背景画像は広がります。
比率を保って縮小させたいのであれば、単純にbackground-size: 100%;を指定すれば良いのではないでしょうか？

参考までに。

@media screen and (max-width: 824px)
#slider {
    width: 100%;
    height: 0;
    background-image: url(../images/mainvisual-01.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 97.911227%;
    background-size: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.content {
    /* position: absolute; */
    /* top: 54%; */
    /* background: transparent; */
    /* background-color: #ccc; */
    padding-top: 97.911227%;
    height: 1000px;
}
p {
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    background: #ccc;
}

投稿2017/10/20 10:06

編集2017/10/20 10:28