【WordPress】背景画像の全体を表示させたい

Question

###前提・実現したいこと
WordPressでHPを制作中です。
①大き目の背景画像(1400×4000px)の全体を表示させたいです。
②フッターは背景画像の最下部に固定させたいです。

###発生している問題・エラーメッセージ
①フッターが背景画像の最下部に表示されない。
②背景画像が一部切れている。スクロールして、背景画像の全体を表示できない。

###該当のソースコード
style.css

body {
	background: url(画像URL) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	line-height: 1;

	background-attachment: fixed;
	background-repeat: no-repeat;
}

html,
body,
div.background {
  height: 100%; /* 「div.background」に対してはmin-heightに対応していないブラウザ用 */
}
 
div.background {
  min-height: 100%; /* 最小の高さ */
}
 
body > div.background {
  height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
}

###試したこと
上記、style.cssの変更。

###補足情報(言語/FW/ツール等のバージョンなど)
WordPress 4.5.4
テーマ：Untitled

Comments

[kei344]

画像の左右が切れるか、空きが出るかすることになりますが、どちらを優先されますか。

[JunYoshida]

回答ありがとうございます。画像の左右は切れないようにしたいです。

[kei344]

新たに質問されているようですが、まだ質問が「受付中」になっています。表題の件については解決したようですので、いったん「解決済」にされてはいかがでしょうか。

[JunYoshida]

失礼いたしました。ご指摘ありがとうございます。こちらの質問は解決済みといたしました。

Answer 1

html, body {
	background-image: url(画像URL);
	background-position: center center;
	background-size: contain; /* cover では左右が切れる可能性がある */
	background-repeat: no-repeat;
	min-height: 285.7143vw;
}

Comments

[JunYoshida]

ありがとうございます。背景画像の全体を表示することはできました。
たびたび申し訳ございません。
背景画像の下位置にフォームを設置する場合、どのようなcssにすればよいでしょうか？

[kei344]

body に背景を設定するのではなく、「下位置」以外を divで囲んでそこに設定されてみてはいかがでしょうか。