background-size：封面无法完全用背景图像填充div

Question

I would like for the background image to fill the div that contains it. I will attach pictures to show what's happening.

What is the cause of this empty space? It is preventing me from moving my containers closer together.

Here is a codepen link: 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%;
}

Here is the 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

Maybe this is more a comment than an answer but I can´t add a comment on your post, so I apologise in case I did not understand your problem.

What I can see is that your image itself has a white border. You probably need to cut the image to remove the parts without the picture. By doing that, it will cover the div

Answer 2

@will is correct. The image you are using is an actual image file and as such will have certain properties that are difficult or not worth the bother to manipulate via HTML, CSS, JavaScript, etc. Some files like images, audio, and video need editing or converting before it is uploaded. That image for instance, needs that transparent area cropped. I did the following:

1. Downloaded the PNG image file.
2. Used Paint.NET program to crop the transparent area of the file.
3. Uploaded file to imgur .

4. Replaced the url: http://s9.postimg.org/4laackvcf/focusbackground.png with the new one from imgur: http://i.imgur.com/7s1A3zf.png

    body { background:#628fd5; } #firstContainer { background-image: url("http://i.imgur.com/7s1A3zf.png"); background-size: cover; width: 720px; height: 700px; float: left; margin-left: -7%; } #secondContainer { background-image: url("http://i.imgur.com/7s1A3zf.png"); background-size: cover; width: 720px; height: 700px; float:right; margin-right: 5%; } 

The result is at this CodePen .

Btw, I replaced the blue image with body { background:#628fd5; } body { background:#628fd5; } . It's always better to use CSS than it is to use a file. For every image you have on a page is a HTTP request round trip which adds to latency (slows down your webpage/site).