擬似要素の大きさが親要素の領域を超えてしまいます

Question

スマホでも背景が固定されるようにしたくて以下のcssのように設定したのですが、
背景画像の大きさがresult-coverを超えて、サイト全体に多いかぶさってしまいます。
どうすれば直りますか？
ちなみにこちらのサイトを参照してます。
https://web.runland.co.jp/blog_cate2/post-3558

<section class="result-cover">
 中身
</section>

.result-cover {
  // background-color: #FDECE6;
  height: auto;
  background-image: url("../img/triangles1-55.png");
  background-color:white;
  background-attachment: fixed;
  background-size: cover;
  position: fixed;
  position: relative;
  z-index: 7;
  padding-bottom: 30px;
}
.result-cover::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-image: url("../img/triangles1-55.png");
  background-size:cover;
  }

Comments

[m.ts10806]

結局どういう意図でこのコードになっているのか分かりませんが、同じ画像使ってたら比較にならないのでは

Answer 1

親要素の範囲に収めるのは技術的に無理とのことだったので、以下のようなコードで背景全体に画像を貼るようにしました。

.result-cover::before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(../img/architecture-br50.png);
background-size:cover;
}

Answer 2

こんにちは。

position:fixedが原因です。固定配置の場合、topなどのプロパティは親要素ではなくて、ビューポートを基準にします。

絶対位置指定の要素は配置された直近の祖先 (つまり、 static ではない直近の祖先) に対して相対的に配置されます。

絶対位置指定 | position - CSS: カスケーディングスタイルシート | MDN

　

固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり

固定位置指定 | position - CSS: カスケーディングスタイルシート | MDN

---

解決方法ですが、position:fixedをやめてposition:absoluteにする、contain:layoutを親要素に用いる、などとすればいいかと思います。

Comments

[Lhankor_Mhy]

あー、参考URLを見ていませんでした。
では、position:absolute はダメですね。sticky もたぶんダメかな。

[Lhankor_Mhy]

contain:layout もビューポートから切り離されるようで、疑似的にスクロール固定しながら、親要素の範囲に収めるのは、おそらく難しいですね。