Fehler beim Laden Hintergrundbild

Ich habe ein seltsames Problem für den Moment. Ich schrieb eine sehr einfache Webseite wie folgt aussieht:Fehler beim Laden Hintergrundbild

Es zeigt normalerweise. Aber wenn ich versuche, es zu aktualisieren, nicht oft, vielleicht einmal für 10 freshes, die Anzeige des Fotos Hintergrund abgehört wie:

Ich bin neu in das Frontend-Design und ich weiß nicht, Was ist passiert. Kann mir jemand helfen? Hier ist mein HTML und CSS-Code, und dieser Fehler erscheint nur mit Chrom, mit Firefox funktioniert es gut.

HTML-Code:

<!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>

und der Hintergrund 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; 
}

Quelle

2017-08-24 Minalinskey

Ich denke, es ist nur vorübergehender Fehler. Vielleicht machen Sie sich deswegen keine Sorgen. – zynkn

Können Sie einen Link zu einer Seite veröffentlichen, auf der dies geschieht? –

@Minalinsky Scheint wie der Rand des Titels irgendwie Einfluss auf die Bildwiedergabe. – cnnr

Sie können versuchen, Hintergrundbild, wie getrennter img-Tag mit einem solchen CSS-Regeln zu platzieren:

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

und Platziere es ganz unten in deinem Layout-Markup

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

Quelle

2017-08-24 07:03:06 cnnr

Fehler beim Laden Hintergrundbild

Antwort

Verwandte Themen