Page Background Image

This feature allows you to set a background image for a page. The image will be displayed behind the page content.

Usage

To set a background image for a page, you need to add a pageBackgroundImageSrc or pageBackgroundImageUri to the page's attributes. Priority is given to pageBackgroundImageSrc over pageBackgroundImageUri.

Example

 const Page={
    type:'normal',
    title:'Page with background image',
    attributes:{
        pageBackgroundImageSrc:require('./image.jpg') // or pageBackgroundImageUri:'https://example.com/image.jpg'
        // ... other attributes
    },

    // ... other page properties and blocks
 }

Note: Make sure rootContainerStyle and contentContainerStyle are not setting backgroundColor or opacity to avoid conflicts with the background image.

Feature related attributes

Attribute	Type	Description	Example
pageBackgroundImageSrc	Object	The source of the background image.	require("./image.jpg")
pageBackgroundImageUri	String	The URI of the background image.	https://example.com/image.jpg
pageBackgroundImageResizeMode	String	The resize mode of the background image.	cover
pageBackgroundImageStyle	Object	The style of the background image.	{ opacity: 0.5 }
pageBackgroundContainerStyle	Object	The style of the background container.	{ flex: 1 }

Example using inapp-page-data-response filter

appmaker.addFilter(
    'inapp-page-data-response',
    'theme-luxe-avenue',
    (data, { pageId }) => {
      if (pageId == 'LoginOptions') { 
        // Update page background image URI
        data.attributes.pageBackgroundImageUri =
          'https://cdn.shopify.com/s/files/1/0734/8643/4599/products/2014_10_18_Lana_Look1101.jpg?v=1680513077';

        // Remove backgroundColor if present in rootContainerStyle
        if (
          data.attributes.rootContainerStyle &&
          data.attributes.rootContainerStyle.backgroundColor
        ) {
          delete data.attributes.rootContainerStyle.backgroundColor;
        }

        // Remove backgroundColor if present in contentContainerStyle
        if (
          data.attributes.contentContainerStyle &&
          data.attributes.contentContainerStyle.backgroundColor
        ) {
          delete data.attributes.contentContainerStyle.backgroundColor;
        }
      }
      return data;
    },
  );