Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Background image not covering on tablet

Background image not covering on tablet

Problem

When I visit my site on my tablet the Background stops displaying after the footer? It doesn't behave like this on my desktop when i reduce the window size however.

This is the site: http://www3.carleton.ca/clubs/sissa/html5/video.html

CSS:

body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the 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 is what it looks like on my nexus 7:

When I use a different user agent in the browser it covers the entire background:

HTML:

 
© Copyright by SimKessy
Problem courtesy of: Batman

Solution

Not sure if this will help and I haven't got the possibility to test it, but you could try adding the background properties to the html element instead of the body element.

I removed !important, but you can add that back if you 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;
}
Solution courtesy of: Christofer Vilander

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Background image not covering on tablet

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×