0

I'm having some trouble figuring out why I cannot the image in the follow html snippit to show up anywhere but on top. I've messed with z-index, !important overrides, and other things for a few hours to no avail. I suspect this may have something to do with how bootstrap handles cards.

Ideally I would like to put a solid background on the 'bottom' of the stack, followed by the background image, and then the actual overlay. It would be very convenient if I could separate these into divs, but I'm not sure if this is compatible with bootstrap cards. At this point, I'll take anything as long as the background image isn't on top.

See the image at the bottom for the output.

  • Actual behavior: (from bottom to top) (solid background --> content --> background image)
  • Desired behavior: (from bottom to top) (solid background --> background image --> content)

For context I have flask running a template that is using this code as a snippit. The snippit is 'called' three times to produce the grid shown in the image. To my understanding, this should be all that is needed to determine what is wrong. If not, I will happily edit this to include more. 



<div class="card">

  <div style="opacity:{{category['opacity']}}; z-index: 0">
    {% if category['image'] is not none %}
    <img src={{category['image']}} class="card-img-overlay" style="object-fit: cover; height: 100%; width: 100%; padding: 0%;">
    {% endif %}
  </div>

  <div class="card-body" style="z-index: 1 !important; background-color: {{category['color']}}; color: black;">
  <div >

  </div>
    <div style='z-index: 5 !important;'>
      <br><br><br>
      <a href={{category['url']}} class="stretched-link"></a>
      <h3 class="card-title text-center">{{category['name']}}</h3>
      <hr style="border-color: white;">
      <p class="card-text text-center font-weight-bold">{{category['description']}}</p>
      <br><br><br>
      <!-- <ul class="list-group">
        <li class="list-group-item">url: {{category['url']}}</li>
        <li class="list-group-item">img: {{category['image']}}</li>
      </ul> -->
    </div>

  </div> 
</div>

snippit output

Will
  • 170
  • 10

1 Answers1

0

Found the solution. Many things were wrong but the correct way to get the behavior I described above is below:

<div class="card bg-dark text-white">
  <div style="background-color: {{category['color']}};">
    <div style="opacity:{{category['opacity']}};">
      {% if category['image'] is not none %}
      <img class="card-img" src={{category['image']}} alt="" style="object-fit: cover; height: 100%; width: 100%; padding: 0%;">
      {% endif %}
    </div>
    <div class="card-img-overlay text-center">
      <a href={{category['url']}} class="stretched-link"></a>
      <h3 class="card-title text-center">{{category['name']}}</h3>
      <hr style="border-color: white;">
      <p class="card-text text-center font-weight-bold">{{category['description']}}</p>
    </div>
  </div>
</div>

behavior desired

Will
  • 170
  • 10