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

CC BY-SA 3.0
2014-12-09T09:24:11.553Z
2014-12-09T09:24:11.553Z
Alec Ritson
<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>

CC BY-SA 3.0
2014-12-08T21:51:52.853Z
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.
naboovalley
CC BY-SA 3.0
2014-12-08T22:09:18.983Z
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?
misteroptimist
CC BY-SA 3.0
2014-12-08T22:12:05.510Z
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.
misteroptimist
CC BY-SA 3.0
2014-12-08T22:25:07.687Z
Try `style="background-image:url({{ image.getURL() }})"` instead, this means you would only overwrite the image and not any of the other background properties
Alec Ritson
CC BY-SA 3.0
2014-12-09T00:37:50.367Z
Brilliant!!! Why does "background-image" work but "background" doesnt
misteroptimist
CC BY-SA 3.0
2014-12-09T01:12:42.807Z
You overwrite `background-repeat` etc. set in you CSS with that. @Alec, please add your comment as an answer!
carlcs
<assets>
Dynamically load a background image
# 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.  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:

    {{ entry.title }} 
    {% endfor %}



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

  
        
      
        {% for series in craft.entries.section('series').level(1).order('postDate desc') %}
          

            {% for image in series.seriesArtwork %}    
                
                
                   {{ series.title }}
                  {{ series.seriesDates }} 
                
            {% endfor %}

              
        {% endfor %}
      
    
  

  

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

    
      {{ entry.title }} 
   {% endfor %}
    

    {{ entry.title }}
    {{ entry.body }}
    Written by {{ entry.author }} on {{ entry.postDate|date('M d, Y') }}
{% 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. @Alec, 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


---

