HTML要素の高さからdivの高さを除外するにはどうすればよいですか？

は、私は私のHTMLの背景は次のように設定している：私はそれがしたい正確に同じように動作しHTML要素の高さからdivの高さを除外するにはどうすればよいですか？

html { 
    background: url("main_bg2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;  
}

を。背景は中央に配置され、ブラウザウィンドウ全体をカバーし、比例します。

しかし、ページの高さを拡張してスクロールさせるコンテンツがたくさんあると、背景画像が拡大されて大きなdivの高さを含むようになり、ズームが行き過ぎになります。

DIVのように画像が大きくならないように、HTML要素全体の高さからdivの高さを浮かべる方法はありますか？

HTML要素の高さに影響を与えずにブラウザウィンドウをスクロールするような並べ替えはありますか？

出典

2016-05-10 user2721815

フィドルやサンプルスニペットを作成してください。より速くお手伝いできるように、 – mmativ

背景を入れているコンテナを変更することをお勧めします。定義上、html要素を選択することで、ページ上のすべてのものを対象としています。私はコンテナを作り、その中の背景の前にあなたが望むすべての要素を置くでしょう。

.page_container { 
    background: url("main_bg2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;  
}

出典

2016-05-10 02:48:35

あなたは何を使用している場合：

background-attachment: fixed;

？

出典

2016-05-10 02:43:47

私はこれが原因で問題になっていると思います。私は固定に設定しているが、私はそれをスクロールするように設定する必要がIOSデバイスのためにそれを読んだ。問題は私のipadにのみあるようです。 – user2721815

ああ。私は他の男がより良い答えを与えたと思う –

Fiddle

$(document).ready(function(){ 
    var bodyBG = $('.no-bg').height(); 

    $('body').css('background-positionY', bodyBG); 
});

これを試してみては、これがないサイズは減少しますが、位置は、それが依存カバーするために小さいサイズになりますので：

<html> 
    <div class="page_container"> 
     <div> Your elements </div> 
    </div> 
    <div> The other components that are stretching your background </div> 
</html>

次に、あなただけのこの操作を行うことができますあなたが除外したいものの高さ。

出典

2016-05-10 02:51:30

HTML要素の高さからdivの高さを除外するにはどうすればよいですか？

答えて

関連する問題