Dynamic background image

Question

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!

It didn't seem to paste in my code?

{{entry.description}}
{{entry.buttonText}} — Chris, Sep 20 '17 at 16:54

score 1 · Answer 1 · answered Sep 20 '17 at 17:22

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>

Thank you!
I just tried it and it says

"Internal Server Error The block 'content' has already been defined line 2." — Chris, Sep 21 '17 at 08:35
@Chris as the code I posted nowhere references a content block, that probably has to do with something else in that template. — Jake Dohm, Sep 21 '17 at 17:19

Dynamic background image

1 Answers1