Enable the user to upload multiple background Images that come from a matirx loop
So I have figured out the answer to my own questions it turns out that I needed to use a {{ counter }} that incremented the class name in both the  tag where the .mid-banner class is defined so that each time the loop runs it add 1 to the class. The stars show the code i have added:

{% for block in entry.homeMatrix %}
    {% if block.type == "homeMatrix" %}
    {% set oddOrEven = cycle(['even', 'odd'], loop.index0) %}
        &lt;section class="section {{ oddOrEven }}"&gt;
            &lt;article class="box"&gt;
                &lt;h1&gt;{{ block.txtTitle }}&lt;/h1&gt;
                {{ block.txt }}
            &lt;/article&gt;
        &lt;/section&gt;  

        **{% set counter = ( counter | default(0) ) + 1 %}**
        {% for image in block.image %}
        &lt;style type="text/css"&gt;
            .mid-banner**{{ counter }}**{
                background-image: url({{ image.getUrl() }});
            }
        &lt;/style&gt;
        {% endfor %}
        &lt;section class="section mid-banner**{{ counter }}**"&gt;
            &lt;article class="box"&gt;
                &lt;h1&gt;{{ block.imageTitle }}&lt;/h1&gt;
            &lt;/article&gt;
        &lt;/section&gt;            
    {% endif %}
{% endfor %}