ページが読み込まれるまでボディを隠そうとしていますが、ボディの背景イメージが読み込みを開始すると、それは表示を無視します：none私はボディに設定して、とにかくそれを表示します。CSSは背景を隠す
ボディCSS
body {
background-image: url("../img/backgrounds/authentication/main.jpg");
}
ボディHTML：
<body style="display: none;">
あなたは、本体に高さ= 0を与えて試してみて、より
document.onload=function(){ body.style.height="100%"};
の場合と同様のonload関数を行うことができますあなたはまた、jQueryとfadeIn fadeOut fuを与えることができる興味があります）
何かの理由で、画像の全高が悲しいほど完全に読み込まれていないようです –
Jmはあなたのスクリーンショットを追加することができますし、たぶんあなたはCSSでも背景サイズを設定する必要があります – derHugo
<html>要素は、それに取り付けられないbackgroundがない場合、ドキュメントのbackgroundが代わり<body>要素からを取られる、ショットnction。
デフォルトでは、<html>要素にはbackgroundが添付されていません。したがって、style="display:none;"を設定すると、HTML要素には画面にレンダリングするための背景が必要になるため、は<body>要素の背景をとします。
単純な溶液（すなわちデフォルトの「色」）透明ではない、いくつかの色に<html>要素のbackground-colorを設定するあります。 Here is a jsfiddle demonstrating this.（画像を表示するには、htmlコードのdisplay: noneを単に削除してください）
希望しました。 :)
それはちょうど私が探しているものではない、そのハックのビット。しかし、あなたの入力のためにどうかありがとう –
問題ありません！ :)その後、ドキュメントが準備できたら実行するonload関数または単純なjavascriptファイルを作成し、 'display'属性を変更することができます。代わりに、遷移に適した 'opacity'属性を使うこともできます（' body'要素は 'root '要素です）。:) –
これに従ってください： "https://www.sitepoint.com/community/t/load-background-image-after-content-loads/240343/3"また "https://varvy.com/pagespeed/defer-images.html"これがあなたの問題を解決するかもしれません。
これ以外の場合は、あなたのCSSに次の行を追加してください。あなたのHTML内
body {
background-color: #eee;
}
body:after {
content:"";
background: url(http://yourimage-url.jpg) no-repeat 0 0;
background-size: cover;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
z-index:-1;
animation:bgFade 2s 2s forwards;
}
@keyframes bgFade {
from {
opacity:0;
}
to {
opacity:1;
}
}
、身体に属性hiddenを与えます。
<body hidden>
</body>
また、HTMLが正しく（すべてのタグが正しく閉じられている）、すべてが本文の内側にあることを確認してください。
body height = 0を指定し、 'document.onload = function（）{body.style.height =" 100％ "};' – derHugo
のようなonload関数を実行するとよいでしょう。 – jack