HomeGuidesReferenceLearn
ArchiveExpo SnackDiscord and ForumsNewsletter

Set a component's background image

Edit this page

Learn how to use ImageBackground component to set a component's background image.

The ImageBackground component lets you display an image as the background of another component in Expo and React Native apps. For example, you can set the background image of a screen in your app with ImageBackground inside the screen's container view.

This component is conceptually similar to CSS's background-image stylesheet property and the backgroundImage DOM style property.

How to use ImageBackground

The ImageBackground component accepts mostly the same props as the Image component with a few differences:

  • The style prop is applied to a view that wraps an inner image.
  • The imageStyle prop is applied to the image itself.
  • The imageRef prop also is applied to the inner image.

Example

Using ImageBackground component
import { /* @info Import ImageBackground from react-native */ImageBackground, StyleSheet, Text, View } from 'react-native';

const image = { uri: "https://docs.expo.dev/static/images/tutorial/background-image.png" };

export default function App() {
  return (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      /* @info Nest your content inside of the ImageBackground component */
      <Text style={styles.text}>Elements</Text>
      <Text style={styles.text}>in Front of</Text>
      <Text style={styles.text}>Background</Text>
    </ImageBackground>
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
    /* @info Make the containing view fill the screen */
    flex: 1,
    flexDirection: 'column',
  },
  image: {
    /* @info Make the image fill the containing view */
    flex: 1,
    /* @info Scale up the image to fill the container, preserving aspect ratio */
    resizeMode: 'cover',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 42,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: '#000000a0',
  },
});

The example above renders a screen as following: