I'm struggling to understand why I can't get the image in this HTML snippet to appear anywhere other than on top. Despite my attempts to adjust z-index, use !important overrides, and try other methods for hours, I haven't been successful. My suspicion is that this issue may be related to how bootstrap handles cards.
My ideal layout would have a solid background at the 'bottom' of the stack, followed by the background image, and then the actual overlay content. While it would be convenient to separate these into divs, I'm unsure if this is compatible with bootstrap cards. At this point, I am open to any solution as long as the background image does not end up on top.
Check out the bottom image for the current output.
- Current behavior: (from bottom to top) (solid background -> content -> background image)
- Desired behavior: (from bottom to top) (solid background -> background image -> content)
For context, I am running flask with a template that utilizes this code as a snippet. The snippet is 'called' three times to create the grid displayed in the image. As far as I can tell, this should provide all the necessary information to pinpoint the issue. If not, I am willing to update this post with more details.
<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>