2011-10-30 11 views
1

背景全体を大きな画像で埋めるにはどうすればよいですか?写真は1400 * 867で、ソリューションはhereで、幅は埋め尽くされますが高さは埋められません。私は写真が高さをいっぱいにするために切り取られるかどうか気にしない。フルイメージCSS/jqueryまたはFlashの背景?

CSS3ウェイ(バックグラウンドサイズ)は完璧ですが、IEでは動作しません。

css/jqueryの方法がわからない場合は、私が画像のパスを入力してフラッシュのサイズを変更できるフラッシュスクリプトに私を誘導できますか?

感謝!

答えて

1

はこのjQueryプラグインを見てみましょう:

http://nanotux.com/blog/fullscreen/

を、私はそれはあなたが探しているものだと思います。私はそれが助けて欲しい!

+0

ありがとう、それをチェックし、それがどのように行くかを教えてくれます。 :D – Cris

+0

これは美しく働いた。私に多くの時間を節約してくれてありがとう! – Cris

1

を試すことができます。

HTML:

<div id="wrapper"> 

    <!--bg-img--> 
    <div class="bg-img> 

     <img src="images/bg.jpg"/> 

    </div> 
    <!--bg-img--> 

</div> 

はCSS:

.bg-img{ 
    /*--sets rules to fill browser window in width and height--*/ 
    min-height: 100%; 
    min-width: 1024px; 

    /*--sets proportionate scaling--*/ 
    width: 100%; 
    height: auto; 

    /*--positioning and layering of image container--*/ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index:-5; 
} 

私はCSS3の方法あなたを信じてこれは何かの話ですか?:

.bg-img{ 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

まあ、あなたが試みることができます回避策がありますが、それは絶対確実ではありません。あなたはこの代わりに全体のスニペットを変更してみてください:

.bg-img{ 
    /*--CSS3 compatible browsers setup--*/ 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    /*--work around for IE--*/ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')"; 
} 

幸運を!それが動作することを願って!

関連する問題