Bootstrap Card Background Image Bug

Test

by Chris Rebert

HTML

<div class="columns">

  <div class="card card-block">
    Satanism
  </div>

  <div class="card card-block">
    Satanism
  </div>

</div>

CSS

.columns {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.card {
  position: relative;
  border-radius: .25rem;/* necessary to trigger the bug +*/
  width: 200px;
  height: 200px;
  background-color: white;
  overflow: hidden;/* necessary to trigger the bug +*/
}

.card::before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Pentagram4.svg/240px-Pentagram4.svg.png');
}