<p>That works good. Some improvements would be appreciated.</p>

<pre><code>{% set news = craft.entries.section('news').limit(3) %}
{% set id = news.uniqueStyleId %}
{% for news in news %}
&lt;style type="text/css"&gt;
    @media (min-width: 1200px){
        {% if id|length %}#{{ id }}{% endif %}{
            background-image:url(
               {% set cover = news.promotionImage %}
               {% if cover|length %}
                   {{ cover[0].getUrl('gtLg') }}
               {% endif %});
             }
    }                       
&lt;/style&gt;
&lt;a id="{% if id|length %}{{ id }}{% endif %}" ng-href="{{ news.url }}" flex layout-padding class="promo news {% if news.whiteText %}whiteText{% endif %}"&gt;
    &lt;span flex="grow" class="promoText md-headline"&gt;
        {{ news.promotionNewsText|ucfirst }}
    &lt;/span&gt;
&lt;/a&gt;
{% endfor %}  
</code></pre>

<p>The reason Why I was getting the same image appeared in my styled block, is because <code>image</code> was printed in browser under same class. All I had to do is to set a unique dynamic ID or class.</p>

CC BY-SA 3.0
2015-10-30T23:16:58.240Z
2015-10-30T23:16:58.240Z
Dominik Krulak
<p>Try it this way. Why are your outputting multiple images for the same background image for the same class.  The last item will override the previous. </p>

<pre><code>{% set news = craft.entries.section('news').limit(3) %}
&lt;style type="text/css"&gt;
  {% for item in news %}
    @media (min-width: 1200px){
        .hero{
            background-image:url(
               {% set cover = item.promotionImage %}
               {% if cover|length %}
                   {{ cover[0].getUrl('gtLg') }}
               {% endif %}
             );
         }
    } 
  {% endfor %}                      
&lt;/style&gt;
</code></pre>

CC BY-SA 3.0
2015-10-30T22:03:38.757Z
I've tried it before either, but it didn't help. Anyway, I've updated the question's code with a part, that may be important to understand it more my situation.
Dominik Krulak
CC BY-SA 3.0
2015-10-30T22:14:26.937Z
I have tried the code and get separate images.  Are you saying you get the same image in every iteration? So you have three <style> tags all with the same image being output?
a-am
CC BY-SA 3.0
2015-10-30T22:26:47.370Z
I've forgot to answer your question.  Every image output in this situation is limited to one only. Done it in control panel. So I'm not getting multiple background images outputs ,therefore I don't get more <style>'s than one.
Dominik Krulak
CC BY-SA 3.0
2015-10-30T22:32:15.403Z
Everything is ok except the same image outputs.
Dominik Krulak
CC BY-SA 3.0
2015-10-30T22:40:50.800Z
Can you post the code that gets output from the browser developer tools?
a-am
CC BY-SA 3.0
2015-10-30T22:53:58.977Z
It outputs correctly. But I think I found the bug. See it yourself.
Dominik Krulak
CC BY-SA 3.0
2015-10-30T21:38:23.553Z
2015-10-30T21:48:20.860Z
2015-10-30T21:48:20.860Z
a-am
<p>It outputs the same image, which shouldn't and I am suspicious, that it causing it curly brackets followed after <code>media queries</code> and after <code>twig code</code>.</p>

<pre><code>{% set news = craft.entries.section('news').limit(3) %}
{% for news in news %}
    &lt;style type="text/css"&gt;
        @media (min-width: 1200px){
            .hero{
                background-image:url(
                   {% set cover = news.promotionImage %}
                   {% if cover|length %}
                       {{ cover[0].getUrl('gtLg') }}
                   {% endif %});
                 }
        }                       
    &lt;/style&gt;
    &lt;a ng-href="{{ news.url }}" flex layout-padding class="promo news {% if news.whiteText %}whiteText{% endif %}"&gt;
        &lt;span flex="grow" class="promoText md-headline"&gt;
            {{ news.promotionNewsText|ucfirst }}
        &lt;/span&gt;
    &lt;/a&gt;
{% endfor %}  
</code></pre>

<assets>
I'm getting unexpected output within media queries
# I'm getting unexpected output within media queries

(Asked by: username_0 on 2015-10-30)

It outputs the same image, which shouldn't and I am suspicious, that it causing it curly brackets followed after media queries and after twig code.
{% set news = craft.entries.section('news').limit(3) %}
{% for news in news %}
    
    
        
            {{ news.promotionNewsText|ucfirst }}
        
    
{% endfor %}

**Tags:** assets

---

## 2 answers

### Answer by username_0 on 2015-10-30. Score: 1 | Accepted answer

That works good. Some improvements would be appreciated.
{% set news = craft.entries.section('news').limit(3) %}
{% set id = news.uniqueStyleId %}
{% for news in news %}


    
        {{ news.promotionNewsText|ucfirst }}
    

{% endfor %}  

The reason Why I was getting the same image appeared in my styled block, is because image was printed in browser under same class. All I had to do is to set a unique dynamic ID or class.


---

### Answer by username_1 on 2015-10-30. Score: 1

Try it this way. Why are your outputting multiple images for the same background image for the same class.  The last item will override the previous. 
{% set news = craft.entries.section('news').limit(3) %}

> **Comments:**
> **username_0**: I've tried it before either, but it didn't help. Anyway, I've updated the question's code with a part, that may be important to understand it more my situation.  
> **username_1**: I have tried the code and get separate images.  Are you saying you get the same image in every iteration? So you have three <style> tags all with the same image being output?  
> **username_0**: I've forgot to answer your question.  Every image output in this situation is limited to one only. Done it in control panel. So I'm not getting multiple background images outputs ,therefore I don't get more <style>'s than one.  
> **username_0**: Everything is ok except the same image outputs.  
> **username_1**: Can you post the code that gets output from the browser developer tools?  
> **username_0**: It outputs correctly. But I think I found the bug. See it yourself.  

---

