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:
when use different user agent in browser covers entire background:
html:
<!--site main body--> <div id="wrapper"> <section id="body_div"> </section> <footer id="footer"> © 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
Post a Comment