背景圖片不填充頁面寬度

Question

我意識到這是以多種方式提出並回答的，但是在拍完我的大腦後，我無法弄清楚如何正確使用它。你可以看到背景圖片並沒有填充整個頁面（它在兩邊都不會縮小約10px）。有什麼建議？

fiddle

CSS：

body { 
    font-size:16px; 
    line-height:22px; 
    height: auto; 
    font-weight: 300; 
    font-family:'Ubuntu', sans-serif; 
    color:#122632; 
    background-color:#afcbdc; 
} 
header { 
    height: 57px; 
    position: fixed; 
    top: 0; 
    left:0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
    font-size:18px; 
    line-height:14px; 
    font-weight:300; 
    z-index:99999; 
    background-color: #ffffff; 
} 
#top-menu a:link { 
    color: #122632; 
    text-decoration:none; 
} 
.navWrapper { 
    padding:0px 15px 0px 15px; 
} 
#top-menu { 
    z-index: 1; 
    left: 0; 
    right: 0; 
    top: 0; 
} 
#top-menu li { 
    float: left; 
    list-style-type: none; 
} 
#top-menu a { 
    display: block; 
    margin: 2px 14px 0px 14px; 
    text-align: center; 
    -webkit-transition: .5s all ease-out; 
    -moz-transition: .5s all ease-out; 
    transition: .5s all ease-out; 
    color: #122632; 
    text-decoration: none; 
} 
.bannerBkg { 
    background-image:url("http://placehold.it/2000x610/333"); 
    background-position:top center; 
    color: #ffffff; 
    height: 610px; 
    margin: 0px 0px 0px 0px; 
    padding: 0px; 
    z-index:999999; 
    width:100%; 
} 
.bannerWrapper { 
    width:94%; 
    max-width:1200px; 
    margin:0px auto; 
} 
#bannerRight { 
    float:right; 
    width:50%; 
} 
.bannerText { 
    font-family:'Special Elite', cursive; 
    font-weight: 400; 
    font-size:85px; 
    line-height:75px; 
    color:#ffffff; 
    text-align:right; 
    width:46%; 
    float:left; 
    padding-top:155px; 
    -webkit-text-stroke: 2px #132937; 
} 
.bannerTextSmall { 
    font-weight: 300; 
    font-family:'Ubuntu', sans-serif; 
    color:#fff; 
    font-size:30px; 
    line-height:29px; 
    padding-top:345px; 
    text-align:right; 
    -webkit-text-stroke: 1px #132937; 
} 
#tentaclesHeader { 
    position:absolute; 
    float:left; 
    left:50%; 
    top:0px; 
    z-index:99; 
    background-image:url("http://lorempixel.com/570/690/sports/"); 
    background-repeat:no-repeat; 
    background-position:top left; 
    width:570px; 
    height:690px; 
} 

HTML：

<header class="nav-down"> 
    <div class="navWrapper"> 
     <div class="navbar"> 
      <ul id="top-menu"> 
       <li class="active"> <a href="#home">home</a> 

       </li> 
       <li> <a href="#about">about</a> 

       </li> 
       <li> <a href="#work">work</a> 

       </li> 
       <li> <a href="#store">contact</a> 

       </li> 
       <li> <a href="#resume" target="_blank">resume</a> 

       </li> 
      </ul> 
     </div> 
    </div> 
</header> 
<div class="bannerBkg"> 
    <div class="bannerWrapper"> 
     <div class="bannerText">test 
      <br>copy 
      <br> <span class="bannerTextSmall">blah blah blah</span> 

     </div> 
     <div id="tentaclesHeader"></div> 
     <div id="bannerRight"></div> 
     <div class="space"></div> 
    </div> 
</div> 

Answer 1

添加margin:0;到你的身體標記的CSS。大多數瀏覽器上的默認值在邊距上的默認值高達10px

body { 
    font-size: 16px; 
    line-height: 22px; 
    height: auto; 
    font-weight: 300; 
    font-family: 'Ubuntu', sans-serif; 
    color: #122632; 
    background-color: #afcbdc; 
    margin: 0; 
}