背景圖片無法覆蓋平板電腦的高度

我的網站有足夠大的背景圖片，但是當我使用我的桌子看到圖片時，圖片並未覆蓋整個屏幕。您可以在底部看到灰色背景（由我假設的瀏覽器生成）。另外，如果我展開的文章我的網頁上，高度的增加，但不是去中心背景圖片無法覆蓋平板電腦的高度

這是網站IM測試圖像：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; 
}

enter image description here

來源

2013-04-03 Batman

你可以添加一個鏈接到網站？或者添加其餘的CSS/HTML？ – JSW189 2013-04-03 19:58:14

對不起忘了：http://www3.carleton.ca/clubs/sissa/html5/ – Batman 2013-04-03 19:59:10

我的FireFox，Chrome和Safari看起來不錯。你解決了你的問題嗎？ – Dawson 2013-04-03 20:37:44

我解決了這個問題，通過改變規則來-webkit-background-size: cover-webkit-background-size: cover !important

似乎迄今的工作。

來源

2013-04-03 20:56:59 Batman

只有在別的東西覆蓋它時。 – NoBugs 2014-04-02 00:21:21

我使用百分比與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%; 
}

來源

2013-04-03 20:07:45

不應該背景大小：封面;規則做同樣的事情？我是Chrome（桌面）當我檢查元素時，沒有任何背景大小的規則正在應用。 – Batman 2013-04-03 20:50:28

我找到了一個解決方案，將高度和寬度放在HTML上。其他的解決方案不會使填充背景屏幕上我的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%; 
}

如果我打的問題在iPad上，然後我會嘗試在加回來了！就這些重要。只是想看看我能不能沒有。

來源

2013-10-31 16:36:18

背景圖片無法覆蓋平板電腦的高度

回答

相關問題