誰かが私を正しい方向に向けることができるかどうか疑問に思っていました. 大きな背景画像を持つ div があります。BG 画像は含むように設定されているため、ブラウザのサイズに合わせて伸縮します。私が抱えている問題は、ブラウザーを縮小しても、div の高さが 1000px のままであることです。そのため、画像が収まるように適切に拡大されますが、下にスクロールし始めると、画像の下に 1000 ピクセルの高さを占めている大きなギャップが表示されます (画像はコンテンツによって縮小されているため)。divが上に移動してギャップが消えるようにするにはどうすればよいですか? 私はこれがいくつかのサイトで行われているのを見てきました。
CSS コード:
.contain { background-size: contain; }
.mainsplashtop {
width:100%;
height:1000px;
background-image:url(../images/main_splash.jpg);
background-repeat:no-repeat;
margin-top:0;
}
HTML
<div data-stellar-background-ratio="0.5" class="mainsplashtop contain"><a class="scroll" href="#destination1"></a></div>
私が言いたいことは、サイトで確認できます (まだ開発の初期段階であるため、混乱は無視してください)。
www.doyouhaveasaddle.com
これは、私が達成しようとしているものの例です。 http://www.unbornink.com/ http://www.fmolinari.com
前もって感謝します。