Image Background

A component that allows you to set a background image to cover the entire screen. You can add child components to it to layer them on top of it.

Adding an Image Background component

Select the Image Background component from the Components drawer. You can open the list of components by clicking the + button next to Components.
In the Data tab (third tab) in the Properties Panel, set the Source Type to Static. Then, in Source, select the image from uploaded assets.

Any component that is added as a child to the Image Background component will be positioned above the image on the screen

In the example above, the Image component is using a remote url source type. There are three different options available to assign a Source Type to an image:

Static when the image source is an uploaded asset
Remote Url when the image source is an url
Data when the image source is coming from the REST API service you've integrated inside Draftbit.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

Property	Description
Component Name	To alter the name of the component. The name is reflected in the Components tree. Defaults to Image Background.
Resize Mode	Set how to resize the image when the dimensions set in the component don't match the actual dimensions of the image. Refer to the Resize Mode table in the Image component to learn more about each setting.
Background Color	Set the background color on the image.
Backface Visibility	Sets whether the back face of an element is visible when turned towards the user.

Data Properties

Property	Description
Source Type	Select the type of source to use for the image `Static`: Use when the image source is an uploaded Asset that will be bundled with your app's code. `Remote Url`: Use when the image source is a static URL that won't change. `Data`: Use when the image URL is dynamic and coming from an REST API Endpoint.
Source	Set the source to use for the image depending on which Source Type you selected. For `Static`, you'll be able to select one of your uploaded assets as the image source. For `Remote Url`, you'll be able to enter a URL to use as the image source. For `Data` you'll be able to pass a dynamic value such as a value from a Fetch or List.

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.