Strangely enough, Bootstrap seems to be interfering with the background image of a div.
The following is the HTML code:
<div class="wide">
<div class="col-xs-5 line">
<hr>
</div>
<div class="col-xs-2 logo">
Logo
</div>
<div class="col-xs-5 line">
<hr>
</div>
</div>
This is the CSS:
.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 displayed if image isn't available */
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;
}
Check out this JSFiddle link that includes Bootstrap.
View this Bootstrap-free JSFiddle link for comparison.
I've been attempting to replicate this example, but it's proving to be quite challenging. Surprisingly, when pasting the exact same code into a new jsfiddle, it works perfectly without any issues.
Evidently, the problem lies within the image itself. The original example loads the background correctly, while the one I'm working on does not behave in the same manner.