html - 背景大小 : cover is not working to completely fill div with background-image

Question

我希望背景图像填充包含它的 div。我将附上图片以显示正在发生的事情。

这个空白的原因是什么？它阻止我将容器移近。

这是代码笔链接:http://codepen.io/ManBearPigg/full/qZVJWy/

#firstContainer {
  background-image: url("/focusbackground.png");
  background-size: cover;
  width: 720px;
  height: 700px;
  float: left;
  margin-left: -7%;
}

#secondContainer {
  background-image: url("/focusbackground.png");
  background-size: cover;
  width: 720px;
  height: 700px;
  float:right;
  margin-right: 5%;
}

这是html

<div id="container">
  <div id="firstContainer">
    <form id="firstForm" action="">
      <textarea id="firstArea" type="text" onkeypress="return myKeyPress(event)"></textarea>
      <input type="submit" id="firstSubmit"></input>
      <div id="lineNo"></div>
    </form>
  </div>
  <div id="secondContainer">
    <form id="secondForm" action="">
      <textarea id="secondArea" type="text" onkeypress="return mySecondKeyPress(event)"></textarea>
      <input type="submit" id="secondSubmit"></input>
    </form>
  </div>
</div>

Answer 1

也许这更像是评论而不是答案，但我无法在您的帖子上添加评论，所以如果我不明白您的问题，我深表歉意。

我能看到的是你的image本身有一个白色的边框。您可能需要剪切图像以删除没有图片的部分。通过这样做，它将覆盖 div