Need help displaying an image on top of a background image with color overlay

[GmidD]

Hi,

I created a custom module that is supposed to be a background image with a color overlay and a centered logo on top of that. But for some reason, I can't get the logo to display in front of the overlay.  

Here is the code for my custom module:

<div class="supplier-overlay">
{% if widget.background_image.src %}
<div class="supplier-header" style="background-image:url('{{ widget.background_image.src }}'); background-repeat: no-repeat; width: 100%;" >
{% endif %}
    <div class="supplier-logo" style="max-width: 350px;">
        {% if widget.supplier_logo.src %}
	<img class="supplier-logo" src="{{ widget.supplier_logo.src }}" alt="{{ widget.supplier_logo.alt }}">
{% endif %}
    </div>
</div>
</div>

And here is the section of CSS I'm referencing:

If I change the z-index value on my supplier logo to a negative number it does push it behind the background image, but no matter what positive value I enter it never comes in front of my overlay. I know a fair amount of HTML and CSS, but am by no means an expert so any help would be greatly appreciated!

[tjoyce]

@GmidD - First of all, I see a potential problem with your first "if" statement. You don't have an "if" around the closing div "</div>". So you are adding an extra closing div if that "if" fails. It will probably cause rendering problems for you. That's probably not related to the issue you are seeing but, what I would do is create a dedicated element just for the background and overlay, and not have any other elements nested within it. An html structure more like this:

<div class="supplier-super-container" style="position:relative;width:100%;height:auto;overflow:hidden;">
    {% if widget.background_image.src %}
      <div class="bg-container" style="position:absolute;width:100%;height:100%;top:0;left:0;"> 
        <div class="bg-image" style="position:relative;background-image:url('{{ widget.background_image.src }}') no-repeat;background-size:cover!important;background-position:center!important;top:0;left:0;width:100%;height:100%;min-height:300px;"></div>
        <div class="bg-overlay" style="top:0;left:0;width:100%;height:100%;min-height:300px;position:relative;opacity:0.6;"></div>
      </div>
    {% endif %}
    <div class="supplier-header">
        <div class="supplier-logo" style="max-width: 350px;">
            {% if widget.supplier_logo.src %}
                <img class="supplier-logo" src="{{ widget.supplier_logo.src }}" alt="{{ widget.supplier_logo.alt }}">
            {% endif %}
        </div>
    </div>
</div>

This way, you don't need to add extra if statements and you shouldn't have to worry about z-index

---

tim@belch.io