css - 2015 号のレスポンシブ背景画像

Question

特にモバイル、つまり 360px x 640px の場合、25 のテーマで背景画像をレスポンシブにしようとしています。私は大量の CSS を試しましたが、ダイスはありませんでした。div は body.custom-background だと思います。

テスト サイトは次のとおりです: test.justinhawleydesign.com

ありがとう

ジャスティン

Answer 1

max-width: 100% が必要で、背景の中心を中心に固定します。

これは、ブラウザーの高さ全体に確実に収まるため、html 要素に配置するのが最適です。そうは言っても、私がインスペクターで修正したとき、ボディはここでうまく機能しているようです。

body.custom-background {
  background: url('http://test.justinhawleydesign.com/wp-content/uploads/2015/09/camera-green22.png') no-repeat center center fixed;
  max-width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}