四角形 - モバイル上の異なる背景イメージですか？ミッションテンプレート付きのカバーページを使用する

Question

私の妻は自分のサイトにカバーページを一時的に使用しています。私たちはデスクトップ上よりもモバイルで異なるバックグラウンドイメージを使用します。しかし私は、カバーページの詳細設定]タブでCSSを注入している完全な初心者だと、次の挿入した：

<style> 
    @media screen and (max-width: 480px) { 
     body { 
       background-image:url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg'); 
     } 
    } 
    </style> 

、それは動作しません。私は間違って何をしていますか？誰かが提供できる助けがあれば、大いに感謝するでしょう。

必要に応じてウェブサイトのURLを提供することができます。

Answer 1

背景のサイズを変更せずに480pxより狭い画面の場合は、640x1136px背景イメージを使用しています。また、画像の上部に大きな空白があります。私は画像が読み込まれていると思うが、あなたは画像の上部を見ているだけで、読み込まれないという偽の結論を引き出している。

この小さなデバイスに画像を表示すべきである：

を：

@media (max-width: 480px) { 
    body { 
    background: 
     white 
     url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg') 
     no-repeat 
     center 
     /contain; 
    min-height: 100vh; 
    margin: 0; 
    } 
} 

キーがbackground-size: contain;
他の可能な値が含まれるとしても別々に書くことができるbackground速記の/contain一部であります

• cover（画像は切り取られますが、要素をカバーします）、
• Length（px、em、rem、vw、cm、inなどで...）、
• auto（元のサイズ - また、デフォルト - あなたが今何を参照してください）、初期状態に
• initial（リセット）
• inherit（