Dynamically load a background image 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.  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:

&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;
       }
    }


Edit 2:

Here is my series page which lists all the series

{% 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 %}


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 %}

    &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 %}
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