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.

Configuration Properties

Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Image Background.
Resize ModeSet 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 ColorSet the background color on the image.
Backface VisibilitySets whether the back face of an element is visible when turned towards the user.