Dynamically load a background image

Question

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:

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

Answer 1

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