On the page properties there is a tab for the thumbnail image. I added an additional tab for a background image.
But it seems to be tricky to have multiple image tabs in a dialog.
For the classic/widget based UI I had to explicitly add 'resourceType = foundation/components/image' to the new background image field so it is stored correctly. But now it works for me.
Now I also wanted to add the background image to the touch UI. So I copied the existing definition of the thumbnail image from the granite dialog and added it on a new tab.
But if I open the page properties in the touch UI and add a new image on the thumbnail or background tab,
both tabs always show the same image. In CRX I see that the nodes and properties are mixed up between both image nodes.
This is the code I added to the touch / cq dialog
....
<tabs jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<backgroundimage
cq:showOnCreate="{Boolean}false"
jcr:primaryType="nt:unstructured"
jcr:title="Background Image"
sling:resourceType="granite/ui/components/foundation/section"
sling:orderBefore="cloudservices">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<image1
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/common/wcm/pagethumbnail"
page="${empty param.item ? requestPathInfo.suffix : param.item}"
quiet="{Boolean}true">
<upload
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/fileupload"
autoStart="{Boolean}false"
cq-msm-lockable="/image1"
multiple="{Boolean}false"
name="./image1/file.sftmp"
sizeLimit="100000000"
title="Upload Image"
uploadUrl="will_be_replaced"/>
<preview
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/siteadmin/admin/pagepreview"/>
</image1>
</items>
</column>
</items>
</backgroundimage>
...
