Background image not appearing on div when including Bootstrap CSS
<p>For some reason, Bootstrap is messing with the background image on a div.</p>

<p>html code:</p>

<pre><code>&lt;div class="wide"&gt;
  &lt;div class="col-xs-5 line"&gt;
    &lt;hr&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-2 logo"&gt;
    Logo
  &lt;/div&gt;
  &lt;div class="col-xs-5 line"&gt;
    &lt;hr&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.wide {
  width: 100%;
  height: 100%;
  height: calc(100% - 1px);
  background-image: url(http://wp.df.uba.ar/sociofis/wp-content/uploads/sites/11/2016/08/Epidemias4.png);
  background-color: #ccccc1;  /* Color if image unavailable */
  background-size: cover;
}

.logo {
  color: #000;
  font-weight: 800;
  font-size: 14pt;
  padding: 25px;
  text-align: center;
}

.line {
  padding-top: 20px;
  overflow: hidden;
  text-align: center;
}

.line hr {
  border-color: #000;
}
</code></pre>

<p><a href="https://jsfiddle.net/jkLvkdy6/" rel="nofollow">JSFiddle including Bootstrap</a>. </p>

<p><a href="https://jsfiddle.net/onqtps98/1/" rel="nofollow">JSFiddle <strong>not</strong> including Bootstrap</a>.</p>

<p>I'm trying to replicate <a href="http://www.bootply.com/108614" rel="nofollow">this example</a> but to no avail. It's not a problem of jsfiddle as by copying and pasting the exact same code to a <a href="https://jsfiddle.net/2e12cnov/" rel="nofollow">new jsfiddle</a> it works with no issues.</p>

<p>Apparently the problem is in the image itself. With the image on the original example the background loads correctly and with the one I'm testing it doesn't.</p>