背景圖像沒有垂直覆蓋100％

目前試圖找出爲什麼我的背景圖像沒有完全覆蓋身體。所有的CSS都是正確的，我可以看到，我試着尋找其他地方尋求幫助。以下是需要查看的代碼部分，以及我所看到的屏幕截圖。儘管整個雲層應該覆蓋它，但云層下方還是可以看到一小塊白色部分。有任何想法嗎？背景圖像沒有垂直覆蓋100％

的截圖可以在這裏找到：

<!doctype html> 
<html lang=""> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
     <script src="js/jquery-1.12.1.js"></script> 
     <script src="js/js1.js"></script> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       <div id="socialmediaicons"> 
        <img src="img/fb.png"> 
        <img src="img/twitter.png"> 
        <img src="img/g+.png"> 
       </div> 
       <h1>COMPUTER +</h1> 
       <h3>Services for both home, and business</h3> 
      </div> 
      <div id="sectionMain"> 
      </div> 
     </div> 
    </body> 
</html>

下面的CSS：

@import url(https://fonts.googleapis.com/css?family=Martel+Sans); 
@import url(https://fonts.googleapis.com/css?family=Oswald); 

* { 
    padding: 0; 
    border: 0; 
    margin: 0; 
    font-family: 'Martel Sans', sans-serif; 
} 
body { 
    background-image: url(../img/backg.jpg); 
    background-position-x: center; 
    background-position-y: top; 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-attachment: fixed; 
} 

/* 
__  __            
\ \ // _ __ __ _ _ __ _ __  ___ _ __ 
    \ \ /\// | '__|/_` | | '_ \ | '_ \ /_ \ | '__| 
    \ V V/ | | | (_| | | |_) | | |_) | | __/ | | 
    \_/\_/ |_|  \__,_| | .__/ | .__/ \___| |_| 
          |_|  |_|     
*/ 

#wrapper { 
    width: 85vw; 
    margin: 0 auto; 
} 

/* 
    _ _      _    
| | | | ___ __ _ __| | ___ _ __ 
| |_| |/_ \/_` |/_` |/_ \ | '__| 
| _ | | __/ | (_| | | (_| | | __/ | | 
|_| |_| \___| \__,_| \__,_| \___| |_| 

*/ 

#socialmediaicons { 
    width: 15%; 
    margin: 0 auto; 
} 
#socialmediaicons img { 
    width: 35px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 15px; 
} 
#header { 
    height: 830px; 
} 
#header h1 { 
    text-align: center; 
    font-size: 120px; 
    padding-top: 25px; 
    margin-top: 160px; 
    letter-spacing: 5px; 
    color: white; 
    text-shadow: 2px 2px 2px black; 
} 
#header h3 { 
    text-align: center; 
    padding-top: 10px; 
    font-size: 18px; 
    padding-bottom: 10px; 
    color: white; 
    text-shadow: 2px 2px 2px black; 
}

來源

2016-03-30 Warriorsfury

使用background-size: cover - ，你想要做

來源

2016-03-30 22:54:57 Johannes

什麼用舊的瀏覽器不支持，但。 – zeropublix

@zeropublix如果OP使用'vw'作爲一個單元（參見代碼），支持'vw'的瀏覽器也將支持'background-size：cover' ... – Johannes

好的。只是一個基本的警告，你不能在付費開發中有好的東西。 – zeropublix

背景圖像沒有垂直覆蓋100％

回答

相關問題