html - How to maintain the size of webpage to be same in every browser/full screen? -
i've written html , looks nice in google chrome when on firefox, has white space @ bottom. when go full screen, has white space @ bottom.
how can solve problem? thanks.
my code:
.mainwrapper { margin-left: auto; margin-right: auto; background-image: url(../img/homebg.png); background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: 100% 100%, auto; -o-background-size: 100% 100%, auto; background-size: 100% 100%, auto; height: 100%; margin-top: 0px; margin-bottom: 0px; } body { margin: 0; padding: 0; font-family: kaiti, "arial unicode ms"; font-size: 100%; color: #000; }
sometimes helps put height of html
, body
@ 100%
. padding: 0
, margin: 0
should in html
, body
styles ensure there no unwanted borders.
.mainwrapper { background: url(bg.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } body { margin: 0; padding: 0; height: 100%; font-family: kaiti, "arial unicode ms"; font-size: 100%; color: #000; } html { height: 100%; padding: 0; margin: 0; }
i think don't understand concept of div
. if want fullscreen background should apply background image body
style this:
body { background: url(bg.png) no-repeat center center fixed; background-size: cover; height: 100%; }
you should use div big screen fill background image. thats why have body. , image move while scrolling , have no white borders @ all.
if still want use div
used parts of website not substitute body have deal fact won't move while scrolling (except have script it).
Comments
Post a Comment