ImageBackground

A React component for displaying an image behind child content. It works like Image but acts as a container — any children are rendered on top of the image.

import { ImageBackground, Text } from '@react-pdf/renderer';

const Cover = () => (
  <ImageBackground
    src="https://react-pdf.org/images/mountains.jpg"
    style={{ height: 200, padding: 24, justifyContent: 'flex-end' }}
  >
    <Text style={{ color: 'white', fontSize: 24 }}>Annual report</Text>
  </ImageBackground>
);

Show preview

Valid props

Prop name	Description	Type	Default
src	Source of the image. See more	Source object	undefined
source	Alias of src. See more	Source object	undefined
style	Defines view styles. See more	Object, Array	undefined
imageStyle	Defines styles applied to the background image	Object, Array	undefined
debug	Enables debug mode on view bounding box. See more	Boolean	false
fixed	Renders component in all wrapped pages. See more	Boolean	false
break	Forces the wrapping algorithm to start a new page when rendering this element. See more	Boolean	false
minPresenceAhead	Hint that no page wrapping should occur between all sibling elements following the element within n points. See more	Number	0
cache	Enables image caching between consecutive renders	Boolean	true
srcSet	Responsive image sources for resolution-based selection	String	undefined
sizes	Display width used for `srcSet` source selection	String, Number	undefined
bookmark	Attach bookmark to element. See more	String or Bookmark	undefined

Valid props

On this page