Get a single asset as a background image

[ju5t]

I'm trying to find my way with Statamic, but for some reason I'm not off to a good start.

On https://statamic.dev/tags/asset it explains how to get a single asset. I kind of understand its reasoning, but for me, it's confusing. I've tried to use this in combination with a background image, but failed.

{{ asset url="/home-background.jpeg" }}
    <div class="bg-gray-300 h-96" style="background-image: {{ url }};">
        test
    </div>
{{ /asset }}

This does not even display the div. What I am doing wrong here and did I use the wrong documentation?

[jasonvarga]

If you only need the url, you don't need the tag at all.

If you still want to use the tag to get things like alt text, etc, then you'll need to make sure the URL you're passing in is correct.
More than likely, it's not just /home-background.jpeg. It's probably in a subdirectory like /assets/home-background.jpeg

[ju5t]

I got it. In my filesystems.php there were 4 options available to configure as a file driver for the container. I kind of figured that the default would make all of the files it contained public, the default for me was local.

One other thing that does confuse me a bit is that a container is not a subfolder itself. So if I create an images container and link it to the assets disk, it will store all images there. If I create a second container called documents, and point it to that same assets disk, it will contain the same files as the images container.

I kind of expected containers to be subfolders of the assets disk instead.

edit: thanks for the help by the way :)

[wturrell]

…also, for beginners (I am one…)

If you're putting images in the default Asset container ("disk"), in filesystems.php there's a disks section and each disk has a url property - for the default 'assets' disk it's /assets/, so to get an image and it's alt text you'd need:

{{ asset url="/assets/example.jpg" }}
    {{ url }} {{ alt }}
{{ /asset }}

Without the correct path it won't work.

I'd also refer people to the Glide tag docs for image resizing - you pass the URL to the source tag then can specify a width and other effects:

<img src="{{ glide src="/assets/example.jpg" w="100" blur="20" }}">