100％幅と高さの背景として使用される回転イメージ

ブラウザウィンドウが拡大/縮小されている場合、拡大/縮小する背景イメージを回転させるにはどうすればよいですか？100％幅と高さの背景として使用される回転イメージ

これを行うスクリプトを知っている人はいますか？それともCSSだけの方法がありますか？

2011-07-17 javi

SuperSizedと呼ばれるjQueryプラグインがあります：http://buildinternet.com/project/supersized/とプラグインはすべてのクロスブラウザの互換性を処理し、必要に応じて選択した時間間隔でイメージをスワップします。

それとも、これを行うためのHTML5の方法は、（Chromeのみのようないくつかのブラウザでサポートされています）：それを自分で行うにはhttp://jsfiddle.net/jfriend00/vzYrf/

html { 
     background: url(http://photos.smugmug.com/photos/344291068_HdnTo-XL.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
}

または2以上の方法：Perfect Full Page Background Imageを。

出典

2011-07-17 05:55:00 jfriend00

...私は、スクリプトをテストしていないが、これは基本的な考え方である誰もが何かをお勧めしていますか？ – javi

これはどのように機能しますか？私はそれをダウンロードし、私のウェブサイトが保存されているのと同じパスまたはフォルダに保存しましたが、どうすれば起動できますか？それはちょうどそこにあるファイルです... jQueryの初心者です。 – javi

あなたのページにそれとjQueryを含めて、あなたのページにコードを入れてから、フルスクリーンのバックグラウンドスライドショーを使うための指示に従ってください。 – jfriend00

それは、単純な:)

いくつかのCSSです：

 
<style type="text/css"> 
    html { height: 100%; overflow:hidden;} 
    body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; } 
    img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: black; } 
</style>

あなたは...これらの値を

と体のコンテンツを再生することができます

 
<body bgcolor="#000300" style="margin:0px; width:100%"> 
<img id="background" src="background.jpg" alt="My Background" /> 
</body>

これは1のためであります背景、あなたはjavascriptで行うことができます残り...

 
<script type="text/javascript"> 
    function changeBackground(){ 
     var backgrounds = ['back1.jpg', 'back2.jpg', 'back3.jpg']; 
     var inRandom = Math.floor(Math.random() * backgrounds.length); 
     document.getElementById('background').src = backgrounds[inRandom]; 
     setTimeout ("changeBackground()", 10000); 
    } 
    setTimeout ("changeBackground()", 10000); 
</script>

出典

2011-07-17 06:20:19

プラグインを読み込むために

11. SVG RECTの幅と高さ100％

12. 100％幅のラッパーではなく、youtube-videoを背景として使用してください

13. 100％の高さと100％幅のdivからテキストがあふれている

14. 背景画像Divの100％の高さを伸ばします

15. ブートストラップDIVが100％背景色で使用するための高さ

16. イメージを取得する幅と高さ

17. イメージを取得する高さと幅

18. UIViewの幅と高さが逆転

19. 体が100％であり、要素は、高さに100％以上を行くと、背景がカットされます