背景画像をロードするバグ

私は今のところ奇妙な問題があります。背景画像をロードするバグ

は、それが正常に表示されます。私のような非常に単純なWebサイトの外観を書きました。しかし、私はない多くの場合、それを更新しようとすると、多分10 freshesための1時間は、背景の写真の表示のような盗聴：

を私はフロントエンドの設計に新たなんだと私は知りません何が起こった。誰か助けてくれますか？ここで私のHTMLとCSSコードですが、このバグはchromeでのみ表示され、Firefoxではうまく機能します。

HTMLコード：

<!doctype html> 
<html> 

<head> 
    <meta charset = "utf8"> 
    <meta http-equiv="Pragma" content="no-cache"> 
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='login.css') }}"> 
    <title> Login page :) </title> 
</head> 

<body>  
    <div id="div_title"> 
     <span id="title"> Welcome to wentong's website! </span> 
     </br> 
     <a href="{{ url_for('homepage') }}" id="guestlink">Entrance for guests here :)</a> 
    </div> 

    {% for message in get_flashed_messages() %} 
    <div class=flash>{{ message }}</div> 
    {% endfor %} 

    <form action="{{ url_for('login') }}" method=post> 
     <div id = "div_login"> 
      <span class="label">Username:</span> 
      <input class="input" type=text name=username> 
      <br/> 
      <span class="label">Password: </span> 
      <input class="input" type=password name=password> 
      <br/> 
      <input id="submit" type=submit value=Login style="display:none"> 
     </div> 
    </form> 
</body> 
</html>

と背景のCSS：

html { 
    background: url(images/aurora.jpg) no-repeat center center fixed; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
}

出典

2017-08-24 Minalinskey

私はそれが一時的なバグだと思う。あなたはそれについて心配しないでください。 – zynkn

これが発生したページへのリンクを投稿できますか？ –

@Minalinsky タイトルの余白のように見えますが、画像のレンダリングに何らかの影響を与えます。 – cnnr

あなたはこのようなCSSルールを持つ別のimgタグのように背景画像を配置しようとすることができます：

.full-screen-background-image { 
    z-index: -999; 
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
}

とレイアウトマークの一番下に配置してください

<!doctype html> 
<html> 
<head> 
    ... 
</head> 
<body> 
    ... 
    <img class="full-screen-background-image" src="you-image.jpg" /> 
</body> 
</html>

出典

2017-08-24 07:03:06 cnnr

背景画像をロードするバグ

答えて

関連する問題