CODEWITHSUNDEEP
htmlcss
PencilCrate
PencilCrate

Reputation: 211

background-size: cover is not working to completely fill div with background-image

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>

Upvotes: 0

Views: 755

Answers (2)

zer00ne
zer00ne

Reputation: 44098

@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: https://i.sstatic.net/MjlMx.png

    body {
    background:#628fd5;
}

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

 #secondContainer {
    background-image: url("https://i.sstatic.net/MjlMx.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; }. 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).

Upvotes: 0

will
will

Reputation: 106

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

Upvotes: 3

Related Questions