css - bug of loading background picture -
i have strange probleme moment. wrote simple website looks like: displays normally. when try refresh it, not often, maybe 1 time 10 freshes, display of background photo bugged like: i'm new frontend design , don't know happened. can me? here html , css code, , bug appears chrome, firefox works well.
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 wentong's website! </span> </br> <a href="{{ url_for('homepage') }}" id="guestlink">entrance guests here :)</a> </div> {% 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>
and background 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; }
you can try place background image separate img tag such css rules:
.full-screen-background-image { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; }
and place bottom of layout markup
<!doctype html> <html> <head> ... </head> <body> ... <img class="full-screen-background-image" src="you-image.jpg" /> </body> </html>
wiki
Comments
Post a Comment