What possibilities does the layout function offer to assign a background image to a <section> element?

What possibilities does the layout function offer to assign a background image to a <section> element?

For this function, I “abuse” the layout settings., but it has a drawback (more on that later):

  • I create a new 1-column layout.
  • In the layout settings, I select an image and specify other settings, including a parallax effect and image darkening

This works perfectly and the background image is displayed:

<section class="parallax" data-parallax-background-ratio="0.5" style="background-image:url('http://localhost:8888/mylocalfolder/media/site/2216db88ad-1695359027/background.jpg')">

Now I come to the downside:
In the panel, the layout looks empty, because the configuration was done exclusively under the settings.

So I can’t see if a background image was assigned to the layout yet.
And the image is not displayed as a preview either. This is not optimal.

Did I choose the wrong way to do this?
Have I made things unnecessarily complicated for myself?
Is there a better way to do this?

I do not show the codes of the Blueprint and Template here, because my question is oriented to the approach. My solution works, but it is not perfect.

There is no way to create previews for layout field items, you can only create block previews. Or at least I don’t know if it is possible somehow.

There is a plugin that uses the blocks field to create layouts, which would allow you to use block settings: Grid Block | Kirby CMS

In view of the new layout options that will come to K4 (easily change between layout types, for example), I would use this with caution.

1 Like

Thank you so much for your quick reply. This is crazy. You’d think you were already reading along while I was writing my question here :slight_smile:

Thanks for the tip for the plug-in. Especially in relation to Kirby 4, I would like to use as few plug-ins as possible.

I guess there is no other efficient way to assign a background image than the way I chose?

Background images are rarely used on my site, so I’m fine with the “workaround”. I just wanted to know if there is a better way to do this.

To make the empty box recognizable that it is not empty I have now added a info-text.
This text will be ignored in the output.