Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-21T08:35:38.267Z
Answers.Text: Thank you!
  
  I just tried it and it says 
  
  "Internal Server Error
  The block 'content' has already been defined line 2."
Answers.UserDisplayName: Chris
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-21T17:19:41.100Z
Answers.Text: @Chris as the code I posted nowhere references a `content` block, that probably has to do with something else in that template.
Answers.UserDisplayName: Jake Dohm
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-20T17:22:50.297Z
Answers.LastActivityDate: 2017-09-20T17:22:50.297Z
Answers.UserDisplayName: Jake Dohm
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-09-20T16:54:28.597Z
Comments.Text: 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>
Comments.UserDisplayName: Chris
Tags: <image>
Title: Dynamic background image
ThreadText: # 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:
  
  ```
  <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>
  
  ```
  
  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() %}
  
  <div class="hero-image" style="background-image: url('{{ heroImage.url() }}');">
      <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>
  
  ```
  
  > **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.  
  
  ---
  
  