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!

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