<p>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:</p>

<pre><code>{% 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 %}
</code></pre>

CC BY-SA 3.0
2015-06-05T09:43:36.613Z
2015-06-05T09:43:36.613Z
Steve
<p>The same outcome could be achieved without the need to us a counter that adds a class/id at all if you use an inline style....</p>

<pre><code>{% 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;  

    {% for image in block.image %}
    &lt;section class="section" style="background-image: url({{ image.getUrl() }});"&gt;
        &lt;article class="box"&gt;
            &lt;h1&gt;{{ block.imageTitle }}&lt;/h1&gt;
        &lt;/article&gt;
    &lt;/section&gt; 
    {% endfor %}           
{% endif %}
{% endfor %}
</code></pre>

CC BY-SA 3.0
2015-06-11T10:44:34.810Z
2015-06-11T10:54:05.180Z
2015-06-11T10:54:05.180Z
Steve
<p>I am trying to enable the user to have mutliple full width css background images, my loop works going through the matrix and grabbing the images but the trouble is they all have the same css class mid-banner and one overrides the other so they all end up being the same image, how can I make it so that each one has a different class as it loops through, or each have an individual id would probably make more sense.</p>

<p>Thanks in advance for any help</p>

<pre><code>{% 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;  
        {% for image in block.image %}
        &lt;style type="text/css"&gt;
            .mid-banner{
                background-repeat:no-repeat;
                background-size:contain;
                background-position:center;
                background-size:cover;
                background-image: url({{ image.getUrl() }});
            }
        &lt;/style&gt;
        {% endfor %}
        &lt;section class="section mid-banner"&gt;
            &lt;article class="box"&gt;
                &lt;h1&gt;{{ block.imageTitle }}&lt;/h1&gt;
            &lt;/article&gt;
        &lt;/section&gt;            
    {% endif %}
{% endfor %}
</code></pre>

<matrix><image><css>
Enable the user to upload multiple background Images that come from a matirx loop
# Enable the user to upload multiple background Images that come from a matirx loop

(Asked by: username_0 on 2015-06-05)

I am trying to enable the user to have mutliple full width css background images, my loop works going through the matrix and grabbing the images but the trouble is they all have the same css class mid-banner and one overrides the other so they all end up being the same image, how can I make it so that each one has a different class as it loops through, or each have an individual id would probably make more sense.
Thanks in advance for any help
{% for block in entry.homeMatrix %}
    {% if block.type == "homeMatrix" %}
    {% set oddOrEven = cycle(['even', 'odd'], loop.index0) %}
        
            
                {{ block.txtTitle }}
                {{ block.txt }}
            
          
        {% for image in block.image %}
        
        {% endfor %}
        
            
                {{ block.imageTitle }}
            
                    
    {% endif %}
{% endfor %}

**Tags:** matrix, image, css

---

## 2 answers

### Answer by username_0 on 2015-06-05. Score: 1 | Accepted answer

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) %}
        
            
                {{ block.txtTitle }}
                {{ block.txt }}
            
          

        **{% set counter = ( counter | default(0) ) + 1 %}**
        {% for image in block.image %}
        
        {% endfor %}
        
            
                {{ block.imageTitle }}
            
                    
    {% endif %}
{% endfor %}


---

### Answer by username_0 on 2015-06-11. Score: 0

The same outcome could be achieved without the need to us a counter that adds a class/id at all if you use an inline style....
{% for block in entry.homeMatrix %}
{% if block.type == "homeMatrix" %}
{% set oddOrEven = cycle(['even', 'odd'], loop.index0) %}
    
        
            {{ block.txtTitle }}
            {{ block.txt }}
        
      

    {% for image in block.image %}
    
        
            {{ block.imageTitle }}
        
     
    {% endfor %}           
{% endif %}
{% endfor %}


---

