jquery - ウィンドウではなく文書を塗りつぶす背景イメージを伸ばしますか？

私はこのプラグインを使用しています：https://github.com/srobbin/jquery-backstretch良い方法で背景をストレッチします。jquery - ウィンドウではなく文書を塗りつぶす背景イメージを伸ばしますか？

文書の内容がスクロールバーを発生させるのに十分な長さである場合、スクロールすると画像は同じ場所に留まります（静止した背景のように見えます）。彼のデモで見ることができます：http://srobbin.com/jquery-plugins/jquery-backstretch/（このページはプラグインを使用しています。スクロールして、背景が動かないことに気をつけてください）。

プラグインを変更してウィンドウの高さなどを使わず、ドキュメントの高さを使用する方法があるのでしょうか？私は見たが、役に立たない。コンテンツが長い場合にはこれは素晴らしい考えではありませんが、多くのコンテンツをまったく持っていない単一のページでのみ行われます。本当に唯一の問題は、ブラウザの不動産（クロムを数えない）が高さが約650px未満である場合です。

ここにプラグインコードがあります。かなり短くても、私が言うことができるものから書き込ま： https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

出典

2010-12-15 Matthew

-2

画像比率に敬意を払うことなく、私はあなたが$("body").height()にbgHeightを設定することができます信じています。

出典

2010-12-16 13:31:23

私はかつて同じ問題を抱えていましたが、これが私の解決策でした。

$(window).resize(bg); 
function bg() { 
    var imgWidth = 1088, 
     imgHeight = 858, 
     imgRatio = imgWidth/imgHeight, 
     bgWidth = $(document).width(), 
     bgHeight = bgWidth/imgRatio; 

     $('body').css({backgroundPosition: 'top center'}); 
     if ($(document).width() < imgWidth && $(document).height() < imgHeight && $(document).height() > bgHeight) { 
      $('body').css({backgroundSize: 'auto 100%'}); 
     } else { 
      $('body').css({backgroundSize: '100% auto'}); 
     } 
} 
bg(); 
$('body').css({backgroundRepeat: 'repeat-x'}); 
$('body').css({backgroundImage: 'url("images/bg-state/bg_static2.png")'});

注：これは、原因コードにIE上でストレッチしていないが、CSS3プロパティの背景サイズを使用しておりますが、コードで独自の画像の幅と高さを設定する必要があります。

出典

2010-12-20 14:39:06 Codler

スクロール可能なコンテンツと背景が固定されているもう1つのアプローチは、を使用するか、<img>をレイヤーに固定することです。その後、jQuery（これは少し重いと思います）に依存する必要はありません。これは、ブラウザがなくても実行できます。

<body background="background.png"> 
    <iframe src="content.html" height="600"/> 
</body>

はまた層でそれを行うための別の方法を見つけました：

<img src="background.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-1;" /> 
<div style="position: static;z-index: 1; "> 
    content 
</div>

出典

2010-12-27 12:40:49

あなたはIMGで設定した2つの位置を持っています？固定と絶対...これは良くありません！ – Warface

良いキャッチ（スタイルは賢明）ですが、技術的に最後のものが勝ちます。一日中、すべての 'position'プロパティを設定できますが、最後のものだけがカウントされます;） –

jquery - ウィンドウではなく文書を塗りつぶす背景イメージを伸ばしますか？

答えて

関連する問題