Alechan Alechan - 2 months ago 6
CSS Question

Background image not appearing on div when including Bootstrap CSS

For some reason, Bootstrap is messing with the background image on a div.

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>


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 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;
}


JSFiddle including Bootstrap.

JSFiddle not including Bootstrap.

I'm trying to replicate this example but to no avail. It's not a problem of jsfiddle as by copying and pasting the exact same code to a new jsfiddle it works with no issues.

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.

Answer

Your <body> element has a height of zero, and your .wide element is using height: calc(100% - 1px) which means 100% of 0 - 1px is -1px.

Give your body element a height of 100%...

https://jsfiddle.net/w6y2nrfy/

Comments