Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T23:16:58.240Z
Answers.LastActivityDate: 2015-10-30T23:16:58.240Z
Answers.UserDisplayName: Dominik Krulak
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T22:03:38.757Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T22:14:26.937Z
Answers.Text: 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?
Answers.UserDisplayName: a-am
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T22:26:47.370Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T22:32:15.403Z
Answers.Text: Everything is ok except the same image outputs.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T22:40:50.800Z
Answers.Text: Can you post the code that gets output from the browser developer tools?
Answers.UserDisplayName: a-am
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T22:53:58.977Z
Answers.Text: It outputs correctly. But I think I found the bug. See it yourself.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-30T21:38:23.553Z
Answers.LastActivityDate: 2015-10-30T21:48:20.860Z
Answers.LastEditDate: 2015-10-30T21:48:20.860Z
Answers.UserDisplayName: a-am
Body: <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>
  
Tags: <assets>
Title: I'm getting unexpected output within media queries
ThreadText: # 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 %}
      <style type="text/css">
          @media (min-width: 1200px){
              .hero{
                  background-image:url(
                     {% set cover = news.promotionImage %}
                     {% if cover|length %}
                         {{ cover[0].getUrl('gtLg') }}
                     {% endif %});
                   }
          }                       
      </style>
      <a ng-href="{{ news.url }}" flex layout-padding class="promo news {% if news.whiteText %}whiteText{% endif %}">
          <span flex="grow" class="promoText md-headline">
              {{ news.promotionNewsText|ucfirst }}
          </span>
      </a>
  {% 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 %}
  <style type="text/css">
      @media (min-width: 1200px){
          {% if id|length %}#{{ id }}{% endif %}{
              background-image:url(
                 {% set cover = news.promotionImage %}
                 {% if cover|length %}
                     {{ cover[0].getUrl('gtLg') }}
                 {% endif %});
               }
      }                       
  </style>
  <a id="{% if id|length %}{{ id }}{% endif %}" ng-href="{{ news.url }}" flex layout-padding class="promo news {% if news.whiteText %}whiteText{% endif %}">
      <span flex="grow" class="promoText md-headline">
          {{ news.promotionNewsText|ucfirst }}
      </span>
  </a>
  {% 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) %}
  <style type="text/css">
    {% 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 %}                      
  </style>
  
  ```
  
  > **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.  
  
  ---
  
  