Components

ImageBackground

Renders children over a background image. The image fills the component's area, and child components are positioned on top.

Props

Prop	Type	Default	Description
`src`*	`string \| Buffer`	—	Background image source.
`style`	`Style`	—	Dimensions and layout for the container.

Usage

vue

<template>
  <Document>
    <Page size="A4">
      <ImageBackground
        src="/cover.jpg"
        :style="{ width: '100%', height: 300 }"
      >
        <View :style="{
          padding: 40,
          flex: 1,
          justifyContent: 'flex-end',
        }">
          <Text :style="{
            fontSize: 32,
            fontWeight: 'bold',
            color: '#fff',
          }">
            Overlay Title
          </Text>
        </View>
      </ImageBackground>
    </Page>
  </Document>
</template>