I have a large enough background image for my site but when I see it using my table the image does not cover the entire screen. You can see the grey background (generated by browser i assume) at the bottom. Also, if i expand articles on my page, the height increases but not the image it goes to the center
This is the site im testing: http://www3.carleton.ca/clubs/sissa/html5/
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:url('images/bg/bg14.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
I solved this issue by changing rule -webkit-background-size: cover
to -webkit-background-size: cover !important
Seems to work thus far.
I've had more success using percentages with background-size
.
element {
background:url(xyz.jpg) no-repeat center center;
background-size:100% 100%;
/* OR */
background-size:100% auto;
/* OR */
background-size:auto 100%;
}
I found a solution by putting a height and width on the HTML. The other solutions wouldn't make the background fill the screen on my Nexus 10.
html {
background: url(backgroundImg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
If I hit problems on an iPad, then I'll try adding back in the !important on those. Just want to see if I can go without.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.