background-size：背景画像でdivを完全に埋めるためにカバーが動作しない

Question

背景画像が含まれているdivを塗りつぶしたいと思います。私は何が起こっているかを示すために写真を添付し​​ます。

この空き領域の原因は何ですか？それは、私の容器をもっと近くに動かすことを妨げている。

ここcodepenリンクされています、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

はたぶんこれが答えよりも多くのコメントですが、私はあなたの投稿にコメントを追加can't私はあなたの問題を理解していなかった場合にお詫び申し上げます。

私は、image自体に白い境界線があることがわかりました。画像なしで部品を取り外すには、画像をカットする必要があります。これを実行すると、divをカバーします

Answer 2

@willが正しいです。使用しているイメージは実際のイメージファイルなので、HTML、CSS、JavaScriptなどを使って操作するのは難しい、または価値のない特定のプロパティを持つことになります。イメージ、オーディオ、ビデオなどの一部のファイルは、アップロードされます。例えば、その画像は透明な領域が切り取られる必要があります。私は次のようにしました：

1. PNG画像ファイルをダウンロードしました。
2. Paint.NETファイルの透過領域をトリミングするプログラムを使用しました。
3. imgurにアップロードされたファイル。

4. は、URLを置き換え：http://s9.postimg.org/4laackvcf/focusbackground.pngを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%; 
   } 
   

結果は、このCodePenです。

Btw、私はbody { background:#628fd5; }と青のイメージを置き換えました。ファイルを使用するよりもCSSを使用するほうが常に良いです。あなたがページ上に持っているすべてのイメージは、待ち時間を増やすHTTP要求ラウンドトリップです（あなたのウェブページ/サイトが遅くなります）。