<p>I see a few issues with your code. (1) Unless you set <code>heroImage</code> as a variable somewhere, then you need to change <code>heroImage</code> to <code>entry.heroImage</code>. (2) But, an asset field returns an assetModel, not the actual image. To access the image, you need to use <code>.first()</code> to select the first asset in the assetModel. (3) Then you need to access the URL on that image, by using <code>url</code>.</p>

<p>This code should work:</p>

<pre><code>{% set heroImage = entry.heroImage.first() %}

&lt;div class="hero-image" style="background-image: url('{{ heroImage.url() }}');"&gt;
    &lt;div id="home"&gt;
        &lt;div class="hero-overlay"&gt;
            &lt;header id="site-header"&gt;
                &lt;div class="main-message"&gt;
                    &lt;div class="container"&gt;
                        &lt;p class="description-image"&gt; {{ entry.description }}&lt;/p&gt;
                        &lt;a class="btn btn-cta-primary btn-cta-blue" href="{{ entry.buttonUrl }}" role="button"&gt;{{ entry.buttonText }}&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/header&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2017-09-21T08:35:38.267Z
Thank you!

I just tried it and it says 

"Internal Server Error
The block 'content' has already been defined line 2."
Chris
CC BY-SA 3.0
2017-09-21T17:19:41.100Z
@Chris as the code I posted nowhere references a `content` block, that probably has to do with something else in that template.
Jake Dohm
CC BY-SA 3.0
2017-09-20T17:22:50.297Z
2017-09-20T17:22:50.297Z
Jake Dohm
<p>I'm super new to Craft and was wondering if someone could help.</p>

<p>I'm trying to set up a hero banner. So there will be a full-width image, on top of this will be the heading text and a CTA button.</p>

<p>I'd like the background to be editable by the user so have set up a field for this called 'hero image'. This is how it looks now but it doesn't seem to be working:</p>

<pre><code>&lt;div class="hero-image" style="background-image: url('{{heroImage}}');"&gt;
    &lt;div id="home"&gt;
        &lt;div class="hero-overlay"&gt;
            &lt;header id="site-header"&gt;  
                &lt;div class="main-message"&gt;  
                    &lt;div class="container"&gt;
                        &lt;p class="description-image"&gt;
                            {{ entry.description }}
                        &lt;/p&gt;

                        &lt;a class="btn btn-cta-primary btn-cta-blue" href="{{entry.buttonUrl}}" role="button"&gt;{{ entry.buttonText }}&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/header&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I'm so confused!</p>

<p>Any help would be greatly appreciated!</p>

CC BY-SA 3.0
2017-09-20T16:54:28.597Z
It didn't seem to paste in my code?
<div class="hero-image" style="background-image: url('{{heroImage}}');">
    <div id="home">
      <div class="hero-overlay">
        <header id="site-header">  
          <div class="main-message">  
            <div class="container">
              <p class="description-image">
                {{entry.description}}
              </p>
              <a class="btn btn-cta-primary btn-cta-blue" href="{{entry.buttonUrl}}" role="button">{{entry.buttonText}}</a>
            </div>
          </div>
        </header>
      </div>
    </div>
  </div>
Chris
<image>
Dynamic background image
# Dynamic background image

(Asked by: username_0 on 2017-09-20)

I'm super new to Craft and was wondering if someone could help.
I'm trying to set up a hero banner. So there will be a full-width image, on top of this will be the heading text and a CTA button.
I'd like the background to be editable by the user so have set up a field for this called 'hero image'. This is how it looks now but it doesn't seem to be working:

    
        
              
                  
                    
                        
                            {{ entry.description }}
                        

                        {{ entry.buttonText }}
                    
                
            
        
    


I'm so confused!
Any help would be greatly appreciated!

**Tags:** image

> **Comments:**
> **username_0**: It didn't seem to paste in my code? <div class="hero-image" style="background-image: url('{{heroImage}}');">     <div id="home">       <div class="hero-overlay">         <header id="site-header">             <div class="main-message">               <div class="container">               <p class="description-image">                 {{entry.description}}               </p>               <a class="btn btn-cta-primary btn-cta-blue" href="{{entry.buttonUrl}}" role="button">{{entry.buttonText}}</a>             </div>           </div>         </header>       </div>     </div>   </div>  

---

## 1 answers

### Answer by username_1 on 2017-09-20. Score: 1

I see a few issues with your code. (1) Unless you set heroImage as a variable somewhere, then you need to change heroImage to entry.heroImage. (2) But, an asset field returns an assetModel, not the actual image. To access the image, you need to use .first() to select the first asset in the assetModel. (3) Then you need to access the URL on that image, by using url.
This code should work:
{% set heroImage = entry.heroImage.first() %}


    
        
            
                
                    
                         {{ entry.description }}
                        {{ entry.buttonText }}

> **Comments:**
> **username_0**: Thank you!  I just tried it and it says   "Internal Server Error The block 'content' has already been defined line 2."  
> **username_1**: @username_0 as the code I posted nowhere references a `content` block, that probably has to do with something else in that template.  

---

