背景の解像度と縦長の解像度に合わせてサイズ変更する

Question

画面の解像度が縦長か横長かに基づいて背景イメージのサイズを変更できますか？

例えば、私は私が達成したいもののイメージを持っている：Cuberto：image

は、このサイト上のそれの例もあります。ワークページにスクロールし、ウィンドウのサイズを変更します。彼らはビデオを使用しています。しかし、それが私が望む望ましい効果です。

HTML：

<div class="slide" id="slide3"></div 

CSS：

#slide3{ 
background-image: url(/images/3.jpg)no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment: fixed;} 

私はそれを動作させることはできません。

Answer 1

背景イメージを使用しているので、コンテナはサイズ変更を行う必要がある 'ウィンドウ'になります。

あなたがorientation

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

From W3C

EDITのメディアクエリを使用してbackground-image入れ替えることができます：あなたがプラグインを使用している場合、これがロードされたイメージをオフに基づいて、インライン高さの値を設定している可能性があります。

Answer 2

background-repeat:no-repeat; 
background-size:contain; 
background-position:center; 

幅、高さ、または余白を設定しないでください。