Answers.Body: <p>Adding this from the comments above as a solution:</p>
  
  <p>Try <code>style="background-image:url({{ image.getURL() }})"</code> instead, this means you would only overwrite the image and not any of the other background properties</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-12-09T09:24:11.553Z
Answers.LastActivityDate: 2014-12-09T09:24:11.553Z
Answers.UserDisplayName: Alec Ritson
Body: <p>I realize this may not be possible to do at all. But I thought I'd go ahead and ask anyway. I'm trying to set up a "hero" image of sorts for specific entries. Here is how I have it setup currently:</p>
  
  <p>Series > Series Entries</p>
  
  <p>Each series entry has a series artwork entry that belongs to it. <img src="https://i.sstatic.net/DfiDJ.png" alt="Here is an example of the &quot;hero&quot; unit I&#39;m trying to add in."> What I'm trying to do, is have Craft dynamically add the image in based on what series comes up. However, I have it styled just right in my css and I'm using it as background-image: url(). Is it possible to have craft dynamically change it? I tried to using a for loop and putting it in hard coded in the html, but I lose the responsiveness framework of Foundation.</p>
  
  <p>Edit: Code:</p>
  
  <pre><code>&lt;section id="hero"&gt;
      &lt;h1&gt;{{ entry.title }}&lt;/h1&gt; 
      {% endfor %}
  &lt;/section&gt;
  
  
      #hero {
          background: url(https://s3-us-west-2.amazonaws.com/bridge-     assets/photos/hero_image_blue.jpg) #074e68;
          background-repeat:no-repeat;
          background-size:cover;
          height: 200px;
          text-align: left;
          position: relative;
          width:100%;
          padding: 100px 20px 0 20px;    
  
          @media #{$medium-only} {        
              height:300px;
         }
  
         @media #{$large-up} {        
          height:300px;
         }
      }
  </code></pre>
  
  <p>Edit 2:</p>
  
  <p>Here is my series page which lists all the series</p>
  
  <pre><code>{% extends "_layouts/_page" %}    
  
  {% block content %}
    &lt;section id="hero"&gt;
      &lt;h1&gt;Messages&lt;/h1&gt;
    &lt;/section&gt;
  
    &lt;section class="series"&gt;
      &lt;div class="row"&gt;    
        &lt;ul class="large-block-grid-3 medium-block-grid-2 small-block-grid-1"&gt;
          {% for series in craft.entries.section('series').level(1).order('postDate desc') %}
            &lt;li&gt;&lt;a href="{{ series.url }}"&gt;
  
              {% for image in series.seriesArtwork %}    
                  &lt;div id="overlay"&gt;&lt;img src="{{ image.getUrl('seriesThumbnail') }}" alt="Logo Image"&gt;&lt;/div&gt;
                  &lt;div class="card"&gt;
                    &lt;span class="series-title"&gt; {{ series.title }}&lt;/span&gt;
                    &lt;span class="series-dates"&gt;{{ series.seriesDates }}&lt;/span&gt;&lt;/a&gt; 
                  &lt;/div&gt;
              {% endfor %}
  
            &lt;/li&gt;    
          {% endfor %}
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;a href="#"&gt;&lt;img src="http://placehold.it/60x60" /&gt;&lt;/a&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>section.series {
      position: relative;
      top: 20px;   
      display: inline;
  
      li {
          list-style: none;
          text-align: left;   
      }
  
      #overlay img {    
          width: 100%;
          vertical-align: top;
      }
  
      img {
          position: relative;
      }
  
     @media #{$medium-up}{
  
     }
  
      .card {
          padding: 10px;
          margin-top: -10px;
  
          span.series-dates {
              display: block;
              color: #0A9CC9;
              font-family: 'grota_sansregular';
              font-size: 14px;
              margin-top: -5px;
          }
  
          span.series-title {
              font-family: 'grota_sansregular';
              font-size: 24px;
              color: #333;
          }    
      }
  }
  </code></pre>
  
  <p>And then when you click on a series (still work in progress, just trying to get image working first),</p>
  
  <pre><code>{% extends "_layouts/_page" %}   
  
  {% block content %}
    {% for image in entry.seriesArtwork %}
  
      &lt;section id="hero"&gt;
        &lt;h1&gt;{{ entry.title }}&lt;/h1&gt; 
     {% endfor %}
      &lt;/section&gt;
  
      &lt;h2&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h2&gt;
      {{ entry.body }}
      &lt;p&gt;Written by {{ entry.author }} on {{ entry.postDate|date('M d, Y') }}&lt;/p&gt;
  {% endblock %}
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-12-08T21:51:52.853Z
Comments.Text: Can you add some more code examples from the template and CSS so we can see how it's setup? Doesn't sound to difficult.
Comments.UserDisplayName: naboovalley
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-12-08T22:09:18.983Z
Comments.Text: I made a few edits for you to see some more of my code. I feel like I'm overcomplicating it. This may be more of a css question than a craft question at this point. I need to dynamically set the #hero background url based on what series i'm currently in. Does that make sense?
Comments.UserDisplayName: misteroptimist
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-12-08T22:12:05.510Z
Comments.Text: When I add in "style="background: url({{ image.getURL() }})">
  It gives me my image all wonky. It doesn't keep its responsiveness or other properties in the css.
Comments.UserDisplayName: misteroptimist
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-12-08T22:25:07.687Z
Comments.Text: Try `style="background-image:url({{ image.getURL() }})"` instead, this means you would only overwrite the image and not any of the other background properties
Comments.UserDisplayName: Alec Ritson
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-12-09T00:37:50.367Z
Comments.Text: Brilliant!!! Why does "background-image" work but "background" doesnt
Comments.UserDisplayName: misteroptimist
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-12-09T01:12:42.807Z
Comments.Text: You overwrite `background-repeat` etc. set in you CSS with that. @Alec, please add your comment as an answer!
Comments.UserDisplayName: carlcs
Tags: <assets>
Title: Dynamically load a background image
ThreadText: # Dynamically load a background image
  
  (Asked by: username_0 on 2014-12-08)
  
  I realize this may not be possible to do at all. But I thought I'd go ahead and ask anyway. I'm trying to set up a "hero" image of sorts for specific entries. Here is how I have it setup currently:
  
  Series > Series Entries
  
  Each series entry has a series artwork entry that belongs to it. ![Here is an example of the "hero" unit I'm trying to add in.](https://i.sstatic.net/DfiDJ.png) What I'm trying to do, is have Craft dynamically add the image in based on what series comes up. However, I have it styled just right in my css and I'm using it as background-image: url(). Is it possible to have craft dynamically change it? I tried to using a for loop and putting it in hard coded in the html, but I lose the responsiveness framework of Foundation.
  
  Edit: Code:
  
  ```
  <section id="hero">
      <h1>{{ entry.title }}</h1> 
      {% endfor %}
  </section>
  
      #hero {
          background: url(https://s3-us-west-2.amazonaws.com/bridge-     assets/photos/hero_image_blue.jpg) #074e68;
          background-repeat:no-repeat;
          background-size:cover;
          height: 200px;
          text-align: left;
          position: relative;
          width:100%;
          padding: 100px 20px 0 20px;    
  
          @media #{$medium-only} {        
              height:300px;
         }
  
         @media #{$large-up} {        
          height:300px;
         }
      }
  
  ```
  
  Edit 2:
  
  Here is my series page which lists all the series
  
  ```
  {% extends "_layouts/_page" %}    
  
  {% block content %}
    <section id="hero">
      <h1>Messages</h1>
    </section>
  
    <section class="series">
      <div class="row">    
        <ul class="large-block-grid-3 medium-block-grid-2 small-block-grid-1">
          {% for series in craft.entries.section('series').level(1).order('postDate desc') %}
            <li><a href="{{ series.url }}">
  
              {% for image in series.seriesArtwork %}    
                  <div id="overlay"><img src="{{ image.getUrl('seriesThumbnail') }}" alt="Logo Image"></div>
                  <div class="card">
                    <span class="series-title"> {{ series.title }}</span>
                    <span class="series-dates">{{ series.seriesDates }}</span></a> 
                  </div>
              {% endfor %}
  
            </li>    
          {% endfor %}
        </ul>
      </div>
    </section>
  
    <a href="#"><img src="http://placehold.it/60x60" /></a>
  
  {% endblock %}
  
  ```
  
  and the css
  
  ```
  section.series {
      position: relative;
      top: 20px;   
      display: inline;
  
      li {
          list-style: none;
          text-align: left;   
      }
  
      #overlay img {    
          width: 100%;
          vertical-align: top;
      }
  
      img {
          position: relative;
      }
  
     @media #{$medium-up}{
  
     }
  
      .card {
          padding: 10px;
          margin-top: -10px;
  
          span.series-dates {
              display: block;
              color: #0A9CC9;
              font-family: 'grota_sansregular';
              font-size: 14px;
              margin-top: -5px;
          }
  
          span.series-title {
              font-family: 'grota_sansregular';
              font-size: 24px;
              color: #333;
          }    
      }
  }
  
  ```
  
  And then when you click on a series (still work in progress, just trying to get image working first),
  
  ```
  {% extends "_layouts/_page" %}   
  
  {% block content %}
    {% for image in entry.seriesArtwork %}
  
      <section id="hero">
        <h1>{{ entry.title }}</h1> 
     {% endfor %}
      </section>
  
      <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
      {{ entry.body }}
      <p>Written by {{ entry.author }} on {{ entry.postDate|date('M d, Y') }}</p>
  {% endblock %}
  
  ```
  
  **Tags:** assets
  
  > **Comments:**
  > **username_1**: Can you add some more code examples from the template and CSS so we can see how it's setup? Doesn't sound to difficult.  
  > **username_0**: I made a few edits for you to see some more of my code. I feel like I'm overcomplicating it. This may be more of a css question than a craft question at this point. I need to dynamically set the #hero background url based on what series i'm currently in. Does that make sense?  
  > **username_0**: When I add in "style="background: url({{ image.getURL() }})"> It gives me my image all wonky. It doesn't keep its responsiveness or other properties in the css.  
  > **username_2**: Try `style="background-image:url({{ image.getURL() }})"` instead, this means you would only overwrite the image and not any of the other background properties  
  > **username_0**: Brilliant!!! Why does "background-image" work but "background" doesnt  
  > **username_3**: You overwrite `background-repeat` etc. set in you CSS with that. @username_2, please add your comment as an answer!  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2014-12-09. Score: 10 | Accepted answer
  
  Adding this from the comments above as a solution:
  
  Try `style="background-image:url({{ image.getURL() }})"` instead, this means you would only overwrite the image and not any of the other background properties
  
  
  ---
  
  