html - Background image not covering on tablet -


when visit site on tablet background stops displaying after footer? doesn't behave on desktop when reduce window size however.

this site: http://www3.carleton.ca/clubs/sissa/html5/video.html

css:

body{     width: 100%; /*always specify when using flexbox*/      height:100%;     display: -webkit-box;     display: -moz-box;     display: box;     text-align:center;     -webkit-box-pack:center; /*way of centering website*/     -moz-box-pack:center;     box-pack:center;     background:black;     background:url('images/bg/bg14.jpg') no-repeat center center fixed;     -webkit-background-size: cover !important;     -moz-background-size: cover !important;     background-size: cover !important;     font-family: arial, helvetica, sans-serif;     font-size: 13px; } 

this looks on nexus 7: enter image description here

when use different user agent in browser covers entire background: enter image description here

html:

<!--site main body-->  <div id="wrapper">     <section id="body_div">      </section>      <footer id="footer">         &copy; copyright  simkessy     </footer>  </div> </body> </html> 

not sure if , haven't got possibility test it, try adding background properties html element instead of body element.

i removed !important, can add if need it.

html {     background:black;     background:url('images/bg/bg14.jpg') no-repeat center center fixed;     -webkit-background-size: cover;     -moz-background-size: cover;     background-size: cover; } 

Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -