Getting a '-' before file name for background image after upload

Hi, I have added a field for an image upload for a background image for an element on my webpage. When i type into the txt file ‘image.jpg’ it loads fine. However after uploading a new image in panel a ‘-’ is added before file name:

Here is my HTML: <div style="background-image:url(./home/<?php echo $page->HeroBackground() ?>)">

Here is my YML: HeroBackground:
    type: files
    headline: Hero Background
    max: 1
    template: cover

After changing image in panel this is what is shown in the browser: <div style="background-image:url(./home/- image-2.jpg)">

Check out the documentation how to use the files field in your templates:

The background image referenced in the divider needed to be fetched using php like this:

<div style="background-image:url(<?= $page->HeroBackground()->toFile()->url()?>)">

Chaining syntax like above is not a good idea, always use an if statement like in the documentation to check if the image exists before calling the url() or any other class method.

Hi, thanks for the advice can you please provide an example?

In this case, we can best use the ternary operator.

<div style="background-image:url(<?= ($f = $page->HeroBackground()->toFile()) ? $f->url() : ''; ?>)">

Thank you for the help, Kirby is the best CMS in the world.